Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
root
/
taipy
-ын хуулбар https://github.com/Avaiga/taipy.git
1
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Merge pull request #1004 from Madhav-2003/hackathon

Quest 007 Hackathon Submission
Marine Gosselin 1 жил өмнө
parent
2f3c3ccea2 57613d37dd
commit
361c8d9341
5 өөрчлөгдсөн 224 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 36 0
      Quine Package Quests/ArtistFinder/Index.html
  2. 1 0
      Quine Package Quests/ArtistFinder/README.md
  3. 50 0
      Quine Package Quests/ArtistFinder/index.js
  4. 24 0
      Quine Package Quests/ArtistFinder/pkg.json
  5. 113 0
      Quine Package Quests/ArtistFinder/style.css

+ 36 - 0
Quine Package Quests/ArtistFinder/Index.html
Файл харах 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>

+<html lang="en">

+  <head>

+  	<meta charset="utf-8" />

+  	<meta name="viewport" content="width=device-width, initial-scale=1" />

+  	<title>Artist-Finder</title>

+    <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

+  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

+  	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">	

+  </head>

+  <body>

+  	<div id="root">   

+    </div>

+    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>  	

+  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  	

+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

+  	<script>

+  		$('.owl-carousel').owlCarousel({

+      loop:true,

+      margin:10,

+      responsive:{

+          0:{

+              items:2

+          },

+          600:{

+              items:3

+          },

+          1000:{

+              items:5

+          }

+        }

+      })

+  	</script>

+  </body>

+</html>

+ 1 - 0
Quine Package Quests/ArtistFinder/README.md
Файл харах 

@@ -0,0 +1 @@
 
+This project helps you to find your favorite Artist using JavaScript and API's

+ 50 - 0
Quine Package Quests/ArtistFinder/index.js
Файл харах 

@@ -0,0 +1,50 @@
 
+import React, { Component } from 'react';

+import './style.css';

+import Music from './component/Music';

+import About from './component/About';

+import { render } from 'react-dom';

+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

+class App extends Component {

+  render() {

+    return (

+      <Router>

+        <nav className="navbar navbar-inverse navbar-fixed-top">

+          <div className="container-fluid">

+            <div className="navbar-header">

+              <Link to="/" className="navbar-brand">

+                Artist Finder

+              </Link>

+              {/* <button className="navbar-toggle" data-target="#menu" data-toggle="collapse">

+                <span className="icon-bar"></span>

+                <span className="icon-bar"></span>

+                <span className="icon-bar"></span>

+              </button> */}

+            </div>

+            {/* <div className="navbar-collapse collapse" id="menu">

+              <ul className="nav navbar-nav">

+                <li>

+                  <Link to="/music">Artist Finder </Link>

+                </li>

+                <li>

+                  <Link to="/about">About </Link>

+                </li>

+                <li>

+                  <Link to="/contact">Contact </Link>

+                </li>

+              </ul>

+            </div> */}

+          </div>

+        </nav>

+        <div className="container">

+          <Switch>

+            <Route exact path="/" component={Music} />

+            <Route exact path="/music" component={Music} />

+            <Route exact path="/about" component={About} />

+          </Switch>

+        </div>

+      </Router>

+    );

+  }

+}

+export default App;

+render(<App />, document.getElementById('root'));

+ 24 - 0
Quine Package Quests/ArtistFinder/pkg.json
Файл харах 

@@ -0,0 +1,24 @@
 
+{

+  "name": "react",

+  "version": "0.0.0",

+  "private": true,

+  "dependencies": {

+    "jquery": "3.5.0",

+    "owl.carousel": "2.3.4",

+    "prop-types": "15.7.2",

+    "react": "16.9.0",

+    "react-dom": "16.9.0",

+    "react-owl-carousel": "^2.3.1",

+    "react-owl-carousel2": "0.3.0",

+    "react-router-dom": "5.1.2"

+  },

+  "scripts": {

+    "start": "react-scripts start",

+    "build": "react-scripts build",

+    "test": "react-scripts test --env=jsdom",

+    "eject": "react-scripts eject"

+  },

+  "devDependencies": {

+    "react-scripts": "latest"

+  }

+}

+ 113 - 0
Quine Package Quests/ArtistFinder/style.css
Файл харах 

@@ -0,0 +1,113 @@
 
+* {

+  font-family: Lato;

+}

+body {

+  background-color: #000;

+}

+.top-content {

+  margin-top: 68px;

+}

+h4 {

+  color: #fff;

+  background-color: #666;

+}

+.box {

+  position: relative;

+  background-color: rgba(255, 255, 255, 0.2);

+  padding: 10px;

+  color: #fff;

+  border-radius: 4px;

+  margin-bottom: 20px;

+}

+.box .list-group li {

+  position: relative;

+  background-color: rgba(255, 255, 255, 0.1);

+}

+.box-img {

+  margin-bottom: 10px;

+}

+.box .list-group li .genre-right {

+  word-wrap: break-word;

+  text-align: right;

+  overflow-wrap: break-word;

+}

+.search {

+  background-color: rgba(255, 255, 255, 0.2);

+  padding: 20px 10px 5px;

+  border-radius: 4px;

+  color: #fff;

+  margin-bottom: 20px;

+}

+.inputWrap input {

+  width: 100%;

+  background: transparent;

+  box-sizing: border-box;

+  box-shadow: none;

+  outline: none;

+  border: none;

+  border-bottom: 2px solid #666;

+}

+.search .inputWrap {

+  position: relative;

+}

+.search .inputWrap label {

+  position: absolute;

+  top: 15;

+  left: 0;

+  color: #666;

+  transition: 0.5s;

+  pointer-events: none;

+}

+.inputWrap input:focus ~ label, .inputWrap input:valid ~ label {

+  top: -15px;

+  color: #fff;

+  transform: scale(0.75);

+  left: -12px;

+}

+.search .inputWrap .border {

+  position: absolute;

+  top: 22px;

+  left: 0;

+  height: 2px;

+  width: 0%;

+  background: rgb(255, 255, 255);

+  transition: 0.5s;

+  /* box-sizing: border-box */

+  box-shadow: 1px 1px 4px 0 rgba(255, 255, 255, 1);

+}

+.inputWrap input:focus ~ .border, .inputWrap input:valid ~ .border {

+  width: 100%;

+}

+.search button {

+  position: absolute;

+  top: 8px;

+  right: 10px;

+}

+.genre-right .badge {

+  margin-left: 2px;

+  z-index: -1;

+}

+.users,

+.genres,

+.love {

+  font-family: FontAwesome;

+  color: #fff;

+}

+.users::before {

+  content: '\f0c0';

+}

+.genres::before {

+  content: '\f001';

+}

+.love::before {

+  content: '\f004';

+}

+.track-box {

+  position: relative;

+  background-color: rgba(255, 255, 255, 0.2);

+  padding: 10px;

+  color: #fff;

+  border-radius: 4px;

+  margin-bottom: 20px;

+  height: 300px;

+}