initial commit

src/App.vue

@@ -1,26 +1,96 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <h1 class="title">Bionic Text Converter</h1>
+  <div class="field">
+    <input placeholder="Type your text" name="content" id="content" type="text" v-model="content">
+    <label for="content">Type your text</label>
+  </div>
+  <article>
+    <bionic-text :content="content" />
+  </article>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+import BionicText from './components/BionicText.vue';
 export default {
   name: 'App',
+  data() {
+    return {
+      content: ''
+    };
+  },
   components: {
-    HelloWorld
+    BionicText
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+@import url('./assets/styles/main.css');
+@import url('./assets/styles/animation.css');
+
+
+.field {
+  animation: fadeIn 3s ease-in-out;
+  width: 50%;
+  margin: 10px auto 0;
+  padding: 15px 0 0;
+  position: relative;
+}
+
+.field input {
+  width: 100%;
+  padding: 7px 0;
+  font-size: 1.3rem;
+  border: 0;
+  outline: 0;
+  color: var(--color-quinary);
+  background: transparent;
+  border-bottom: 2px solid var(--color-quinary);
+}
+
+.field label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  font-size: 1rem;
+}
+
+.field input::placeholder {
+  color: transparent;
+}
+
+.field input:placeholder-shown+label {
+  font-size: 1.3rem;
+  cursor: text;
+  top: 20px;
+}
+
+.field input:focus {
+  border-width: 3px;
+}
+
+.field input:focus+label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  font-size: 1rem;
+  color: var(--color-primary);
+}
+
+h1.title {
+  letter-spacing: 5px;
+  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary),
+    9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
+  animation: fadeIn 1s ease-in;
+  font-size: 85px;
+}
+
+article {
+  width: 50%;
+  margin: 50px auto;
+  text-align: left;
+  word-break: break-all;
 }
 </style>

src/assets/styles/animation.css

@@ -0,0 +1,9 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/assets/styles/main.css

@@ -0,0 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: 'Inter', sans-serif;
+  background: rgba(28, 28, 30, 0.1);
+}
+
+#app {
+  --color-primary: #ccd1d5;
+  --color-secondary: #abb2b9;
+  --color-tertiary: #89939d;
+  --color-quaternary: #677481;
+  --color-quinary: #566573;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: var(--color-primary);
+  margin-top: 60px;
+}

src/components/BionicText.vue

@@ -0,0 +1,28 @@
+<template>
+  <span class="bionic-text" v-html="getTransformedContent" />
+</template>
+
+<script>
+import transformToBionic from './transformer';
+export default {
+  props: {
+    content: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    getTransformedContent() {
+      return transformToBionic(this.content);
+    }
+  }
+}
+</script>
+<style>
+span.bionic-text {
+  font-size: 18px;
+  line-height: 1.4;
+  letter-spacing: 0.35px;
+  color: rgb(28, 28, 30);
+}
+</style>

src/components/transformer.js

@@ -0,0 +1,22 @@
+const transformToBionic = (content) => {
+  // TODO: make cachable
+  const words = content.split(' ');
+  const newWords = words.map((word) => {
+    const newWord = [...word];
+    const diff = newWord.length % 2;
+    let idx = newWord.length / 2;
+
+    if (diff) {
+      idx = Math.ceil(idx);
+    }
+
+    newWord.splice(idx, 0, '</b>');
+    newWord.unshift('<b>');
+
+    return newWord.join('');
+  });
+
+  return newWords.join(' ');
+};
+
+export default transformToBionic;