Simple but might come in handy in future

Jhhames · Oct 22, 2018 · 4e38a33 · 4e38a33
commit 4e38a33
Show file tree

Hide file tree

Showing 38 changed files with 22,774 additions and 0 deletions.
diff --git a/css/bootstrap.css b/css/bootstrap.css
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,34 @@
+body {
+    background-color: #f3f3f3;
+    backface-visibility: hidden;
+}
+
+.rating-star {
+    cursor: pointer;
+    font-size: 55px;
+}
+
+.rating-star:hover {
+    color: orange;
+    transition: all .5s;
+    animation: mymove .4s;
+}
+
+.hover-color {
+    color: orange;
+}
+
+.click-color {
+    color: orange;
+}
+
+@keyframes mymove {
+    0% {
+        /* opacity: 0; */
+        transform: scale(1.3, 1.3);
+    }
+    100% {
+        /* opacity: 1; */
+        transform: scale(1, 1);
+    }
+}
diff --git a/css/style.min.css b/css/style.min.css
diff --git a/font/roboto/Roboto-Bold.eot b/font/roboto/Roboto-Bold.eot
diff --git a/font/roboto/Roboto-Bold.ttf b/font/roboto/Roboto-Bold.ttf
diff --git a/font/roboto/Roboto-Bold.woff b/font/roboto/Roboto-Bold.woff
diff --git a/font/roboto/Roboto-Bold.woff2 b/font/roboto/Roboto-Bold.woff2
diff --git a/font/roboto/Roboto-Light.eot b/font/roboto/Roboto-Light.eot
diff --git a/font/roboto/Roboto-Light.ttf b/font/roboto/Roboto-Light.ttf
diff --git a/font/roboto/Roboto-Light.woff b/font/roboto/Roboto-Light.woff
diff --git a/font/roboto/Roboto-Light.woff2 b/font/roboto/Roboto-Light.woff2
diff --git a/font/roboto/Roboto-Medium.eot b/font/roboto/Roboto-Medium.eot
diff --git a/font/roboto/Roboto-Medium.ttf b/font/roboto/Roboto-Medium.ttf
diff --git a/font/roboto/Roboto-Medium.woff b/font/roboto/Roboto-Medium.woff
diff --git a/font/roboto/Roboto-Medium.woff2 b/font/roboto/Roboto-Medium.woff2
diff --git a/font/roboto/Roboto-Regular.eot b/font/roboto/Roboto-Regular.eot
diff --git a/font/roboto/Roboto-Regular.ttf b/font/roboto/Roboto-Regular.ttf
diff --git a/font/roboto/Roboto-Regular.woff b/font/roboto/Roboto-Regular.woff
diff --git a/font/roboto/Roboto-Regular.woff2 b/font/roboto/Roboto-Regular.woff2
diff --git a/font/roboto/Roboto-Thin.eot b/font/roboto/Roboto-Thin.eot
diff --git a/font/roboto/Roboto-Thin.ttf b/font/roboto/Roboto-Thin.ttf
diff --git a/font/roboto/Roboto-Thin.woff b/font/roboto/Roboto-Thin.woff
diff --git a/font/roboto/Roboto-Thin.woff2 b/font/roboto/Roboto-Thin.woff2
diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf
diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot
diff --git a/fonts/fontawesome-webfont.svg b/fonts/fontawesome-webfont.svg
diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf
diff --git a/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff
diff --git a/fonts/fontawesome-webfont.woff2 b/fonts/fontawesome-webfont.woff2
diff --git a/index.html b/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Foorloop Hack-ife</title>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="css/font-awesome.min.css">
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <!-- Material Design Bootstrap -->
+    <link href="css/mdb.min.css" rel="stylesheet">
+    <!-- Your custom styles (optional) -->
+    <link href="css/style.css" rel="stylesheet">
+    <link rel="icon" href="img/favicon.png">
+
+</head>
+
+<body>
+
+    <div id="app-root">
+        <div class="justify-content-center row">
+            <div class="col-md-8 text-center mt-5">
+                <span v-for="(n,i) in 5" :class="['fa fa-star rating-star star-' +n]" @mouseover="hoverEffect(n)" @mouseleave="removeColor(n)" @click="starClicked(n)"></span>
+                <input type="hidden" :value="starNumber">
+            </div>
+        </div>
+    </div>
+    <!-- <div id="app-root">
+        <ul>
+            <li v-if="jhhames">
+                <button class="btn btn-success" v-on:click="changeToVue">Click to unvue {{jhhames}} </button>
+            </li>
+            <li v-else>
+                <button class="btn btn-primary" v-on:click="changeToVue">Click to vue</button>
+            </li>
+        </ul>
+        <form action="">
+
+            <input type="text" v-model="name">
+            <input type="text" v-model="details">
+            <p v-if="validateName" class="text-danger"> Name Cannuh be blank </p>
+            <button type="submit" v-on:click="doNotSubmit">Add</button>
+        </form>
+        <div class="row ">
+            <div class="green col-md-6" v-if="list.length">
+                <ul type="none">
+                    <li class="list-item" v-for="row in list">
+                        {{ row.name }}
+                    </li>
+                </ul>
+            </div>
+            <div class="red col-md-6" v-else>
+                <p class="lead">
+                    No users yet
+                </p>
+            </div>
+
+        </div>
+
+    </div>
+ -->
+
+    <!-- SCRIPTS -->
+    <!-- JQuery -->
+    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
+    <!-- Bootstrap tooltips -->
+    <script type="text/javascript" src="js/popper.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script type="text/javascript" src="js/bootstrap.min.js"></script>
+    <!-- MDB core JavaScript -->
+    <script type="text/javascript" src="js/mdb.min.js"></script>
+    <!-- VUEJS JavaScript -->
+    <script type="text/javascript" src="js/vue.js"></script>
+    <!-- APP JavaScript -->
+    <script type="text/javascript" src="js/app.js"></script>
+</body>
+
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,62 @@
+var vue = new Vue({
+    el: '#app-root',
+    data: {
+        jhhames: true,
+        list: [],
+        name: '',
+        details: '',
+        starNumber: 0
+    },
+    methods: {
+        // changeToVue: function() {
+        //     this.jhhames = !this.jhhames;
+        // },
+        // doNotSubmit: function(e) {
+        //     if (this.name == '') {
+        //         alert("Fuck you motherlover!");
+        //     }
+        //     this.list.push({
+        //         name: this.name,
+        //         details: this.details
+        //     });
+
+        //     this.name = ''
+        //     this.details = ''
+        //     e.preventDefault();
+        // },
+        // validateName: function() {
+        //     if (this.name == '') {
+        //         return true
+        //     } else {
+        //         return false
+        //     }
+        // },
+        hoverEffect: function(i) {
+            for (let j = 1; j <= i; j++) {
+                $('.star-' + j).addClass('hover-color');
+            }
+            if (i < this.starNumber) {
+                for (let a = i + 1; a <= this.starNumber; a++) {
+                    $('.star-' + a).removeClass('click-color')
+                }
+            }
+        },
+        removeColor: function(n) {
+            for (let i = 0; i <= 5; i++) {
+                $('.star-' + i).removeClass('hover-color');
+            }
+        },
+        starClicked: function(n) {
+            this.starNumber = n
+            for (let i = 0; i <= 5; i++) {
+                $('.star-' + i).removeClass('click-color')
+            }
+            for (let i = 0; i <= this.starNumber; i++) {
+                $('.star-' + i).addClass('click-color')
+            }
+        }
+    },
+    mounted() {
+
+    }
+})
diff --git a/js/bootstrap.min.js b/js/bootstrap.min.js
diff --git a/js/jquery-3.3.1.min.js b/js/jquery-3.3.1.min.js
diff --git a/js/popper.min.js b/js/popper.min.js