├── todolist ├── weekday.html ├── weekend.html ├── public │ ├── readme.txt │ └── styles.css ├── views │ ├── readme.txt │ ├── footer.ejs │ ├── about.ejs │ ├── header.ejs │ └── index.ejs ├── readme.md ├── date.js ├── package.json ├── index.html └── app.js ├── mailchimp ├── failure.html ├── success.html ├── Procfile ├── readme.md ├── package.json ├── strylesign.css ├── app.js └── signup.html ├── FigmaPlugin ├── Readme.md ├── .gitignore ├── code.ts ├── code.js ├── manifest.json ├── tsconfig.json ├── package.json ├── package-lock.json ├── README.md └── ui.html ├── drums ├── readme.txt ├── kick.png ├── snare.mp3 ├── snare.png ├── tom-1.mp3 ├── tom-2.mp3 ├── tom-3.mp3 ├── tom-4.mp3 ├── tom1.png ├── tom2.png ├── tom3.png ├── tom4.png ├── kick-bass.mp3 ├── index.html ├── styles.css └── index.js ├── firebase ├── readme.md └── Project-main.zip ├── journal ├── views │ ├── readme.md │ ├── partial │ │ ├── readme.md │ │ ├── footer.ejs │ │ └── header.ejs │ ├── post.ejs │ ├── about.ejs │ ├── contact.ejs │ ├── home.ejs │ └── compose.ejs ├── public │ └── css │ │ ├── readme.md │ │ └── styles.css ├── readme.md ├── package.json └── app.js ├── merkle ├── readme.md ├── .eslintrc.json ├── next.config.js ├── .gitignore ├── package.json ├── tsconfig.json └── README.md ├── complaints-app ├── Procfile ├── readme.md ├── package.json ├── success.html ├── failure.html ├── stylesign.css └── app.js ├── todo-frontend ├── readme.md ├── bits.css └── index.html ├── Calculator Flexbox ├── Readme.md ├── calc.PNG ├── index.html └── styles.css ├── colorguessgame ├── readme.md ├── index.html ├── colors.css └── col.js ├── json to html table ├── readme.md └── index.html ├── pirple_assigns ├── readme.md ├── pirplecert.pdf ├── final project │ ├── apple.png │ ├── favicon.ico │ ├── google.png │ ├── wiki-logo.jfif │ ├── wikifound.jfif │ ├── wikiglobe.jfif │ ├── wikitionary.jfif │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── wikipedfavicon.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── readme.md │ └── site.webmanifest ├── css │ ├── recipecss.css │ ├── thirdassign │ │ └── recipecss.css │ └── index.html └── html │ ├── recipe.html │ └── recipefinal.html ├── rockpaperscissors ├── readme.md ├── model.css ├── rock.html ├── style.css └── main.js ├── Venn Diagram ├── Readme.md ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html └── src │ ├── VennDiagram.css │ ├── App.css │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── VennDiagram.js │ └── App.js ├── relaxer app ├── readme.txt ├── javas.js ├── index.html └── style.css ├── NFT ├── Rich.png └── RichKid#001.png ├── VenndiagramReact ├── Readme.md └── src │ ├── index.css │ ├── reportWebVitals.js │ ├── App.css │ ├── index.js │ └── App.js ├── simon ├── blue.mp3 ├── green.mp3 ├── red.mp3 ├── wrong.mp3 ├── yellow.mp3 ├── readme.txt ├── styles.css ├── index.html └── game.js ├── Line and Pi Charts ├── src │ ├── Example.js │ ├── Colors.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── Context │ │ └── chartContext.js │ ├── DragDrop.css │ ├── Dropbar.css │ ├── Container.jsx │ ├── PiChart.js │ ├── SourceBox.jsx │ ├── App.css │ ├── App.js │ ├── LineChart.js │ ├── DropBar.js │ ├── DragDrop.js │ ├── TargetBox2.js │ └── TargetBox.jsx ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html └── Readme.md ├── boss challenge 1 ├── Readme.txt ├── dice1.png ├── dice2.png ├── dice3.png ├── dice4.png ├── dice5.png ├── dice6.png ├── dicejs.js ├── styles.css └── dicee.html ├── Task ├── img │ └── img │ │ ├── people1.jpg │ │ ├── people15.jpg │ │ ├── people2.jpg │ │ ├── people23.jpg │ │ ├── people4.jpg │ │ ├── person1.jpg │ │ ├── person10.jpg │ │ ├── person11.jpg │ │ ├── person12.jpg │ │ ├── person13.jpg │ │ ├── person14.jpg │ │ ├── person15.jpg │ │ ├── person16.jpg │ │ ├── person17.jpg │ │ ├── person18.jpg │ │ ├── person2.jpg │ │ ├── person3.jpg │ │ ├── person4.jpg │ │ ├── person5.jpg │ │ ├── person6.jpg │ │ ├── person7.jpg │ │ ├── person8.jpg │ │ ├── person9.jpg │ │ ├── interior11.jpg │ │ ├── interior29.jpg │ │ ├── interior37.jpg │ │ ├── interior42.jpg │ │ ├── 60e54d2c-768.jpeg │ │ ├── 74d6cec4-768.jpeg │ │ ├── 363e7da2-1024.jpeg │ │ ├── 4e3f26e0-1024.jpeg │ │ └── 63b92862-1024.jpeg └── index.html ├── bmi calculator ├── readme.txt ├── package.json ├── bmicalc.html └── calculator.js ├── README.md ├── weatherdata ├── readme.txt ├── package.json ├── index.html └── app.js ├── clock-master ├── README.md ├── index.html ├── clockjs.js └── clockcss.css ├── solarsystem-master ├── README.md ├── index.html └── solar.css ├── Task 2 ├── styles.css └── index.html ├── Task 1 ├── styles.css └── index.html └── Storybook ├── story.css └── index.html /todolist/weekday.html: -------------------------------------------------------------------------------- 1 | dhvgdv -------------------------------------------------------------------------------- /todolist/weekend.html: -------------------------------------------------------------------------------- 1 | ugegd -------------------------------------------------------------------------------- /mailchimp/failure.html: -------------------------------------------------------------------------------- 1 | none 2 | -------------------------------------------------------------------------------- /mailchimp/success.html: -------------------------------------------------------------------------------- 1 | none 2 | -------------------------------------------------------------------------------- /FigmaPlugin/Readme.md: -------------------------------------------------------------------------------- 1 | easy plugin 2 | -------------------------------------------------------------------------------- /drums/readme.txt: -------------------------------------------------------------------------------- 1 | Justa drumset 2 | -------------------------------------------------------------------------------- /firebase/readme.md: -------------------------------------------------------------------------------- 1 | firebase auth 2 | -------------------------------------------------------------------------------- /journal/views/readme.md: -------------------------------------------------------------------------------- 1 | ejs files 2 | -------------------------------------------------------------------------------- /mailchimp/Procfile: -------------------------------------------------------------------------------- 1 | web: node app.js -------------------------------------------------------------------------------- /merkle/readme.md: -------------------------------------------------------------------------------- 1 | merkle assignment 2 | -------------------------------------------------------------------------------- /complaints-app/Procfile: -------------------------------------------------------------------------------- 1 | web: node app.js -------------------------------------------------------------------------------- /journal/public/css/readme.md: -------------------------------------------------------------------------------- 1 | CSS file 2 | -------------------------------------------------------------------------------- /todo-frontend/readme.md: -------------------------------------------------------------------------------- 1 | A todo list webpage 2 | -------------------------------------------------------------------------------- /todolist/public/readme.txt: -------------------------------------------------------------------------------- 1 | public folder 2 | -------------------------------------------------------------------------------- /Calculator Flexbox/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /colorguessgame/readme.md: -------------------------------------------------------------------------------- 1 | The colour guessing game. 2 | -------------------------------------------------------------------------------- /journal/views/partial/readme.md: -------------------------------------------------------------------------------- 1 | headers and footers 2 | -------------------------------------------------------------------------------- /json to html table/readme.md: -------------------------------------------------------------------------------- 1 | Convert json to html tables 2 | -------------------------------------------------------------------------------- /pirple_assigns/readme.md: -------------------------------------------------------------------------------- 1 | Pirplw assignments (Front-end) 2 | -------------------------------------------------------------------------------- /rockpaperscissors/readme.md: -------------------------------------------------------------------------------- 1 | A simple rps game made using JS 2 | -------------------------------------------------------------------------------- /todolist/views/readme.txt: -------------------------------------------------------------------------------- 1 | 2 | Folder for the EJS script 3 | -------------------------------------------------------------------------------- /Venn Diagram/Readme.md: -------------------------------------------------------------------------------- 1 | Draw dynamic venn diagrams in React.js 2 | -------------------------------------------------------------------------------- /journal/readme.md: -------------------------------------------------------------------------------- 1 | A journal/diary website created using ejs templates 2 | -------------------------------------------------------------------------------- /merkle/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /todolist/readme.md: -------------------------------------------------------------------------------- 1 | Creating a to-do list 2 | 3 | Templates are fun 4 | -------------------------------------------------------------------------------- /relaxer app/readme.txt: -------------------------------------------------------------------------------- 1 | A web application for relaxing and being at ease. 2 | -------------------------------------------------------------------------------- /NFT/Rich.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/NFT/Rich.png -------------------------------------------------------------------------------- /VenndiagramReact/Readme.md: -------------------------------------------------------------------------------- 1 | A dynamic venn diagram using React, D3.js & Venn.js 2 | -------------------------------------------------------------------------------- /drums/kick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/kick.png -------------------------------------------------------------------------------- /drums/snare.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/snare.mp3 -------------------------------------------------------------------------------- /drums/snare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/snare.png -------------------------------------------------------------------------------- /drums/tom-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/tom-1.mp3 -------------------------------------------------------------------------------- /drums/tom-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/tom-2.mp3 -------------------------------------------------------------------------------- /drums/tom-3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/tom-3.mp3 -------------------------------------------------------------------------------- /drums/tom-4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/tom-4.mp3 -------------------------------------------------------------------------------- /drums/tom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/tom1.png -------------------------------------------------------------------------------- /drums/tom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/tom2.png -------------------------------------------------------------------------------- /drums/tom3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/tom3.png -------------------------------------------------------------------------------- /drums/tom4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/tom4.png -------------------------------------------------------------------------------- /simon/blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/simon/blue.mp3 -------------------------------------------------------------------------------- /simon/green.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/simon/green.mp3 -------------------------------------------------------------------------------- /simon/red.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/simon/red.mp3 -------------------------------------------------------------------------------- /simon/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/simon/wrong.mp3 -------------------------------------------------------------------------------- /Line and Pi Charts/src/Example.js: -------------------------------------------------------------------------------- 1 | export { Container as default } from './Container'; 2 | -------------------------------------------------------------------------------- /boss challenge 1/Readme.txt: -------------------------------------------------------------------------------- 1 | Trial for JS 2 | A random dice generator using JS and DOM. 3 | -------------------------------------------------------------------------------- /simon/yellow.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/simon/yellow.mp3 -------------------------------------------------------------------------------- /NFT/RichKid#001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/NFT/RichKid#001.png -------------------------------------------------------------------------------- /drums/kick-bass.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/drums/kick-bass.mp3 -------------------------------------------------------------------------------- /simon/readme.txt: -------------------------------------------------------------------------------- 1 | The Simon Game is basically just a memorization game built using Javascript 2 | -------------------------------------------------------------------------------- /FigmaPlugin/.gitignore: -------------------------------------------------------------------------------- 1 | # Node 2 | *.log 3 | *.log.* 4 | node_modules 5 | 6 | out/ 7 | dist/ 8 | code.js 9 | -------------------------------------------------------------------------------- /Task/img/img/people1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/people1.jpg -------------------------------------------------------------------------------- /Task/img/img/people15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/people15.jpg -------------------------------------------------------------------------------- /Task/img/img/people2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/people2.jpg -------------------------------------------------------------------------------- /Task/img/img/people23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/people23.jpg -------------------------------------------------------------------------------- /Task/img/img/people4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/people4.jpg -------------------------------------------------------------------------------- /Task/img/img/person1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person1.jpg -------------------------------------------------------------------------------- /Task/img/img/person10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person10.jpg -------------------------------------------------------------------------------- /Task/img/img/person11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person11.jpg -------------------------------------------------------------------------------- /Task/img/img/person12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person12.jpg -------------------------------------------------------------------------------- /Task/img/img/person13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person13.jpg -------------------------------------------------------------------------------- /Task/img/img/person14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person14.jpg -------------------------------------------------------------------------------- /Task/img/img/person15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person15.jpg -------------------------------------------------------------------------------- /Task/img/img/person16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person16.jpg -------------------------------------------------------------------------------- /Task/img/img/person17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person17.jpg -------------------------------------------------------------------------------- /Task/img/img/person18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person18.jpg -------------------------------------------------------------------------------- /Task/img/img/person2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person2.jpg -------------------------------------------------------------------------------- /Task/img/img/person3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person3.jpg -------------------------------------------------------------------------------- /Task/img/img/person4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person4.jpg -------------------------------------------------------------------------------- /Task/img/img/person5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person5.jpg -------------------------------------------------------------------------------- /Task/img/img/person6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person6.jpg -------------------------------------------------------------------------------- /Task/img/img/person7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person7.jpg -------------------------------------------------------------------------------- /Task/img/img/person8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person8.jpg -------------------------------------------------------------------------------- /Task/img/img/person9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/person9.jpg -------------------------------------------------------------------------------- /firebase/Project-main.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/firebase/Project-main.zip -------------------------------------------------------------------------------- /Calculator Flexbox/calc.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Calculator Flexbox/calc.PNG -------------------------------------------------------------------------------- /Task/img/img/interior11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/interior11.jpg -------------------------------------------------------------------------------- /Task/img/img/interior29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/interior29.jpg -------------------------------------------------------------------------------- /Task/img/img/interior37.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/interior37.jpg -------------------------------------------------------------------------------- /Task/img/img/interior42.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/interior42.jpg -------------------------------------------------------------------------------- /Venn Diagram/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /boss challenge 1/dice1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/boss challenge 1/dice1.png -------------------------------------------------------------------------------- /boss challenge 1/dice2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/boss challenge 1/dice2.png -------------------------------------------------------------------------------- /boss challenge 1/dice3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/boss challenge 1/dice3.png -------------------------------------------------------------------------------- /boss challenge 1/dice4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/boss challenge 1/dice4.png -------------------------------------------------------------------------------- /boss challenge 1/dice5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/boss challenge 1/dice5.png -------------------------------------------------------------------------------- /boss challenge 1/dice6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/boss challenge 1/dice6.png -------------------------------------------------------------------------------- /todolist/views/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Line and Pi Charts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Task/img/img/60e54d2c-768.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/60e54d2c-768.jpeg -------------------------------------------------------------------------------- /Task/img/img/74d6cec4-768.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/74d6cec4-768.jpeg -------------------------------------------------------------------------------- /pirple_assigns/pirplecert.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/pirplecert.pdf -------------------------------------------------------------------------------- /Task/img/img/363e7da2-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/363e7da2-1024.jpeg -------------------------------------------------------------------------------- /Task/img/img/4e3f26e0-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/4e3f26e0-1024.jpeg -------------------------------------------------------------------------------- /Task/img/img/63b92862-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Task/img/img/63b92862-1024.jpeg -------------------------------------------------------------------------------- /Venn Diagram/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Venn Diagram/public/favicon.ico -------------------------------------------------------------------------------- /Venn Diagram/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Venn Diagram/public/logo192.png -------------------------------------------------------------------------------- /Venn Diagram/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Venn Diagram/public/logo512.png -------------------------------------------------------------------------------- /bmi calculator/readme.txt: -------------------------------------------------------------------------------- 1 | This is a bmi calculator using a local server 2 | Hosted using port 3000 3 | Express is used. 4 | -------------------------------------------------------------------------------- /complaints-app/readme.md: -------------------------------------------------------------------------------- 1 | A small complaints submittable web app did using node.js 2 | 3 | Just for being thorough. 4 | -------------------------------------------------------------------------------- /Line and Pi Charts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Line and Pi Charts/public/favicon.ico -------------------------------------------------------------------------------- /Line and Pi Charts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Line and Pi Charts/public/logo192.png -------------------------------------------------------------------------------- /Line and Pi Charts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/Line and Pi Charts/public/logo512.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # full-stack-web-dev 2 | Some Full-stack web dev programs and front-end only webpages 3 | 4 | Tried out a few web apps, nvm 5 | -------------------------------------------------------------------------------- /pirple_assigns/final project/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/apple.png -------------------------------------------------------------------------------- /pirple_assigns/final project/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/favicon.ico -------------------------------------------------------------------------------- /pirple_assigns/final project/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/google.png -------------------------------------------------------------------------------- /weatherdata/readme.txt: -------------------------------------------------------------------------------- 1 | Getting the weather data using the openweathermap API. 2 | Local server used 3 | Express also has been used. 4 | -------------------------------------------------------------------------------- /pirple_assigns/final project/wiki-logo.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/wiki-logo.jfif -------------------------------------------------------------------------------- /pirple_assigns/final project/wikifound.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/wikifound.jfif -------------------------------------------------------------------------------- /pirple_assigns/final project/wikiglobe.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/wikiglobe.jfif -------------------------------------------------------------------------------- /pirple_assigns/final project/wikitionary.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/wikitionary.jfif -------------------------------------------------------------------------------- /Line and Pi Charts/src/Colors.js: -------------------------------------------------------------------------------- 1 | export const Colors = { 2 | BLUE: 'Time', 3 | SPEED:'Speed', 4 | DISTANCE: 'Distance' 5 | } 6 | -------------------------------------------------------------------------------- /clock-master/README.md: -------------------------------------------------------------------------------- 1 | # clock 2 | A Clock GUI made using HTML CSS and JS. 3 | 4 | 5 | Preview 6 | -------------------------------------------------------------------------------- /pirple_assigns/final project/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/favicon-16x16.png -------------------------------------------------------------------------------- /pirple_assigns/final project/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/favicon-32x32.png -------------------------------------------------------------------------------- /pirple_assigns/final project/wikipedfavicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/wikipedfavicon.png -------------------------------------------------------------------------------- /pirple_assigns/final project/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/apple-touch-icon.png -------------------------------------------------------------------------------- /journal/views/post.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partial/header"); -%> 2 | 3 |

<%= title %>

4 |

<%= content %>

5 | 6 | <%- include("partial/footer"); -%> -------------------------------------------------------------------------------- /merkle/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /FigmaPlugin/code.ts: -------------------------------------------------------------------------------- 1 | figma.showUI(__html__) 2 | 3 | figma.ui.resize(500, 500) 4 | 5 | figma.ui.onmessage = pluginMessage => { 6 | 7 | 8 | figma.closePlugin() 9 | } -------------------------------------------------------------------------------- /journal/views/about.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partial/header"); -%> 2 | 3 |

About

4 | 5 |

<%= aboutContent %>

6 | 7 | <%- include("partial/footer"); -%> -------------------------------------------------------------------------------- /pirple_assigns/final project/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/android-chrome-192x192.png -------------------------------------------------------------------------------- /pirple_assigns/final project/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chandran-jr/WebClutter/HEAD/pirple_assigns/final project/android-chrome-512x512.png -------------------------------------------------------------------------------- /journal/views/contact.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partial/header"); -%> 2 | 3 |

Contact

4 | 5 |

<%= contactcontent %>

6 | 7 | <%- include("partial/footer"); -%> -------------------------------------------------------------------------------- /FigmaPlugin/code.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | figma.showUI(__html__); 3 | figma.ui.resize(500, 500); 4 | figma.ui.onmessage = pluginMessage => { 5 | figma.closePlugin(); 6 | }; 7 | -------------------------------------------------------------------------------- /solarsystem-master/README.md: -------------------------------------------------------------------------------- 1 | # solarsystem 2 | A simple visual of our solar system created using CSS. 3 | 4 | Preview: 5 | 6 | Click here 7 | -------------------------------------------------------------------------------- /journal/views/partial/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |

Made by Chandran ☣

6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /FigmaPlugin/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GovindFigmaPlugin", 3 | "id": "1204670517773121819", 4 | "api": "1.0.0", 5 | "main": "code.js", 6 | "editorType": [ 7 | "figma" 8 | ], 9 | "ui": "ui.html" 10 | } -------------------------------------------------------------------------------- /Line and Pi Charts/Readme.md: -------------------------------------------------------------------------------- 1 | Create Line and Pi charts based on the option chosen from a drop down menu, and also implement a drag and drop functionality for changing the 2 | X and Y axises dynamically and render them accoringly and neatly. 3 | -------------------------------------------------------------------------------- /FigmaPlugin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "lib": ["es6"], 5 | "strict": true, 6 | "typeRoots": [ 7 | "./node_modules/@types", 8 | "./node_modules/@figma" 9 | ] 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /mailchimp/readme.md: -------------------------------------------------------------------------------- 1 | Ceeating a login page to a newspaper website. 2 | 3 | 4 | I used mailchimp API. 5 | 6 | 7 | I also used Heroku to deploy my website. 8 | 9 | 10 | Check it out here 11 | -------------------------------------------------------------------------------- /Venn Diagram/src/VennDiagram.css: -------------------------------------------------------------------------------- 1 | .VennDiagram { 2 | border: 2px solid red; 3 | margin: auto; 4 | border-radius: 20px; 5 | 6 | } 7 | 8 | .noneval { 9 | display: grid; 10 | place-items: center; 11 | color: red; 12 | } -------------------------------------------------------------------------------- /pirple_assigns/final project/readme.md: -------------------------------------------------------------------------------- 1 | The task i was given was to recreate the entire homepage of wikipedia using html and css alone. 2 | 3 | Link to the blog 4 | -------------------------------------------------------------------------------- /todolist/views/about.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%- include("header") %> 4 | 5 |

This is a simple website for a to-do list created by 6 | Govnd B Chandran just for learning full stack web dev 7 |

8 | 9 |

Feel free to contact me

10 | 11 | <%- include("footer") %> 12 | -------------------------------------------------------------------------------- /pirple_assigns/final project/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /todolist/views/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To-do List 8 | 9 | 10 | -------------------------------------------------------------------------------- /todolist/date.js: -------------------------------------------------------------------------------- 1 | //jshint esversion:6 2 | 3 | 4 | function getdate() { 5 | var today = new Date(); 6 | 7 | var options = { 8 | weekday: "long", 9 | day: "numeric", 10 | month: "long" 11 | }; 12 | 13 | var day = today.toLocaleDateString("en-US", options); 14 | } 15 | -------------------------------------------------------------------------------- /Venn Diagram/src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-evenly; 5 | margin-top: 140px; 6 | 7 | } 8 | 9 | .inputTable{ 10 | display: grid; 11 | place-items: center; 12 | } 13 | 14 | .input > h3 { 15 | font-size: 15px; 16 | } 17 | 18 | .input > input { 19 | padding: 8px; 20 | outline: none; 21 | } -------------------------------------------------------------------------------- /weatherdata/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weather", 3 | "version": "1.0.0", 4 | "description": "weatherapp", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "govind", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.20.1", 13 | "express": "^4.17.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /bmi calculator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bmicalc", 3 | "version": "1.0.0", 4 | "description": "bmi calc", 5 | "main": "calculator.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "govind", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.20.1", 13 | "express": "^4.17.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /todolist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todolist", 3 | "version": "1.0.0", 4 | "description": "a to do list", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.20.1", 13 | "ejs": "^3.1.7", 14 | "express": "^4.17.3" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /mailchimp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mailchimp", 3 | "version": "1.0.0", 4 | "description": "newsletter", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.19.0", 13 | "express": "^4.17.1", 14 | "request": "^2.88.2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /complaints-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mailchimp", 3 | "version": "1.0.0", 4 | "description": "newsletter", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.19.0", 13 | "express": "^4.17.1", 14 | "request": "^2.88.2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /journal/views/home.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partial/header"); -%> 2 | 3 |

Home

4 | 5 |

<%= startingContent %>

6 | 7 | <% console.log(posts); %> 8 | 9 | <% posts.forEach(function(post){ %> 10 |

<%= post.title %>

11 |

<%= post.content.substring(0,100)+ "..." %> Read More...

12 | 13 | <% }); %> 14 | 15 | <%- include("partial/footer"); -%> -------------------------------------------------------------------------------- /FigmaPlugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GovindFigmaPlugin", 3 | "version": "1.0.0", 4 | "description": "Your Figma Plugin", 5 | "main": "code.js", 6 | "scripts": { 7 | "build": "tsc -p tsconfig.json", 8 | "watch": "npm run build -- --watch" 9 | }, 10 | "author": "", 11 | "license": "", 12 | "devDependencies": { 13 | "@figma/plugin-typings": "^1.58.0", 14 | "typescript": "*" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /journal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ejs-challenge", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.18.3", 13 | "ejs": "^3.1.7", 14 | "express": "^4.16.3", 15 | "lodash": "^4.17.21" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Venn Diagram/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Venn Diagram/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /VenndiagramReact/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /VenndiagramReact/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /boss challenge 1/dicejs.js: -------------------------------------------------------------------------------- 1 | var randomNumber1 = Math.floor(Math.random()*6)+1; 2 | var randomNumber2 = Math.floor(Math.random()*6)+1; 3 | 4 | 5 | var dice1 = "dice" + randomNumber1 +".png"; 6 | var dice2 = "dice" + randomNumber2 +".png"; 7 | 8 | 9 | var image1 = document.querySelectorAll("img")[0]; 10 | image1.setAttribute("src", dice1); 11 | 12 | var image2 = document.querySelectorAll("img")[1]; 13 | image2.setAttribute("src", dice2); 14 | 15 | -------------------------------------------------------------------------------- /Task 2/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | background-color: #E7E7E7; 6 | } 7 | 8 | .bigsquare { 9 | display:grid; 10 | color: white; 11 | grid-template-columns: 1fr 1fr 1fr 1fr; 12 | grid-template-rows: 1fr 1fr 1fr 1fr; 13 | grid-gap:8px; 14 | } 15 | 16 | #smallsquare 17 | { 18 | width: 60px; 19 | height: 60px; 20 | border: 8px solid #A3A9B6; 21 | } -------------------------------------------------------------------------------- /weatherdata/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Weather app 7 | 8 | 9 |
10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /todolist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To-do List 7 | 8 | 9 | <% if(kindofday==="Saturday" || kindofday==="Sunday"){ %> 10 |

<%= kindofday %> List

11 | <%} else { %> 12 |

<%= kindofday %> List

13 | <%} %> 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /VenndiagramReact/src/App.css: -------------------------------------------------------------------------------- 1 | #venn{ 2 | display: grid; 3 | place-items: center; 4 | } 5 | 6 | .boxVenn{ 7 | border: 1px solid black; 8 | width: 50%; 9 | height: 50%; 10 | margin: auto; 11 | margin-top: 1%; 12 | } 13 | 14 | .inputTable{ 15 | display: grid; 16 | place-items: center; 17 | } 18 | 19 | .input > h3 { 20 | font-size: 15px; 21 | } 22 | 23 | .input > input { 24 | padding: 8px; 25 | outline: none; 26 | } 27 | 28 | .noneval { 29 | display: grid; 30 | place-items: center; 31 | color: rgb(92, 236, 92); 32 | } -------------------------------------------------------------------------------- /merkle/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /journal/views/compose.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partial/header"); -%> 2 | 3 |

Compose

4 | 5 |
6 |
7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | <%- include("partial/footer"); -%> -------------------------------------------------------------------------------- /bmi calculator/bmicalc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

BMI Calculator

10 |
11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Venn Diagram/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /VenndiagramReact/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Venn Diagram/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Line and Pi Charts/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /merkle/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "merkle", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@types/node": "20.4.7", 13 | "@types/react": "18.2.18", 14 | "@types/react-dom": "18.2.7", 15 | "eslint": "8.46.0", 16 | "eslint-config-next": "13.4.12", 17 | "highcharts": "^11.1.0", 18 | "highcharts-react-official": "^3.2.0", 19 | "next": "13.4.12", 20 | "react": "18.2.0", 21 | "react-dom": "18.2.0", 22 | "typescript": "5.1.6" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /solarsystem-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Solar System 4 | 5 | 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /bmi calculator/calculator.js: -------------------------------------------------------------------------------- 1 | //jshint esversion:6 2 | 3 | const express = require("express"); 4 | const bodyParser = require("body-parser"); 5 | const app = express(); 6 | app.use(bodyParser.urlencoded( 7 | { extended: true } 8 | )); 9 | 10 | app.get("/", function(req,res){ 11 | res.sendFile(__dirname + "/bmicalc.html"); 12 | }); 13 | 14 | app.post("/", function(req, res){ 15 | var wt = Number(req.body.w); 16 | var ht = Number(req.body.h); 17 | var hh = ht*ht; 18 | var bmi = wt/hh; 19 | res.send("Your BMI is "+ bmi); 20 | }) 21 | 22 | 23 | app.listen(3000, function(){ 24 | console.log("Server started"); 25 | }); -------------------------------------------------------------------------------- /merkle/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "bundler", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "paths": { 18 | "@/*": ["./src/*"] 19 | } 20 | }, 21 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 22 | "exclude": ["node_modules"] 23 | } 24 | -------------------------------------------------------------------------------- /clock-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Clock 6 | 7 | 9 | 10 | 11 |
12 |
13 |

00

Hours

14 |

00

Minutes

15 |

00

Seconds

16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /relaxer app/javas.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById('container'); 2 | const text = document.getElementById('text'); 3 | 4 | const totalTime = 7500; 5 | const breatheTime = (totalTime / 5) * 2; 6 | const holdTime = totalTime / 5; 7 | 8 | breathAnimation(); 9 | 10 | function breathAnimation() { 11 | text.innerText = 'Breathe In!'; 12 | container.className = 'container grow'; 13 | 14 | setTimeout(() => { 15 | text.innerText = 'Hold'; 16 | 17 | setTimeout(() => { 18 | text.innerText = 'Breathe Out!'; 19 | container.className = 'container shrink'; 20 | }, holdTime); 21 | }, breatheTime); 22 | } 23 | 24 | setInterval(breathAnimation, totalTime); -------------------------------------------------------------------------------- /journal/public/css/styles.css: -------------------------------------------------------------------------------- 1 | .container-fluid { 2 | padding-top: 70px; 3 | padding-bottom: 70px; 4 | } 5 | .navbar { 6 | padding-top: 15px; 7 | padding-bottom: 15px; 8 | border: 0; 9 | border-radius: 0; 10 | margin-bottom: 0; 11 | font-size: 12px; 12 | letter-spacing: 5px; 13 | } 14 | .navbar-nav li a:hover { 15 | color: #1abc9c !important; 16 | } 17 | 18 | .footer-padding { 19 | padding-bottom: 60px; 20 | } 21 | 22 | .footer { 23 | position: absolute; 24 | text-align: center; 25 | bottom: 0; 26 | width: 100%; 27 | height: 60px; 28 | background-color: #1abc9c; 29 | } 30 | 31 | .footer p { 32 | margin-top: 25px; 33 | font-size: 12px; 34 | color: #fff; 35 | } 36 | -------------------------------------------------------------------------------- /boss challenge 1/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 70%; 3 | margin: auto; 4 | text-align: center; 5 | } 6 | 7 | .dice { 8 | text-align: center; 9 | display: inline-block; 10 | 11 | } 12 | 13 | body { 14 | background-color: #393E46; 15 | } 16 | 17 | h1 { 18 | margin: 30px; 19 | font-family: 'Lobster', cursive; 20 | text-shadow: 5px 0 #232931; 21 | font-size: 8rem; 22 | color: #4ECCA3; 23 | } 24 | 25 | p { 26 | font-size: 2rem; 27 | color: #4ECCA3; 28 | font-family: 'Indie Flower', cursive; 29 | } 30 | 31 | img { 32 | width: 80%; 33 | } 34 | 35 | footer { 36 | margin-top: 5%; 37 | color: #EEEEEE; 38 | text-align: center; 39 | font-family: 'Indie Flower', cursive; 40 | 41 | } 42 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { ChartContextProvider } from './Context/chartContext'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /complaints-app/success.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Success!!t 7 | 8 | 9 | 10 |
11 |
12 |

Thank you!!

13 |

Your complaint has been registered and will soon be looked into!

14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /relaxer app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Relaxer 9 | 10 | 11 |

Relaxer

12 | 13 |
14 |
15 | 16 |

17 | 18 |
19 | 20 |
21 | 22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Task 1/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | place-items: center; 4 | background-color: #00BCC5; 5 | } 6 | 7 | 8 | .upper { 9 | display: grid; 10 | grid-gap: 7px; 11 | grid-template-columns: 1fr 1fr; 12 | grid-template-rows: 1fr; 13 | margin-top: 164px; 14 | 15 | } 16 | #square 17 | { 18 | background-color: #EAE8E7; 19 | border: 6px solid white; 20 | height: 133.3px; 21 | width: 127px; 22 | } 23 | 24 | #longsquare 25 | { height: 285.6px; 26 | width: 200px; 27 | background-color: #EAE8E7; 28 | border: 6px solid white; 29 | } 30 | 31 | #widesquare 32 | { height: 133.3px; 33 | width: 200px; 34 | background-color: #EAE8E7; 35 | border: 6px solid white; 36 | } -------------------------------------------------------------------------------- /drums/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Drum Kit 7 | 8 | 9 | 10 | 11 | 12 |

Drum 🥁 Kit

13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /clock-master/clockjs.js: -------------------------------------------------------------------------------- 1 | function clock() { 2 | const hours = document.querySelector(".hours") 3 | const minutes = document.querySelector(".minutes") 4 | const seconds = document.querySelector(".seconds") 5 | 6 | hours.innerHTML = new Date().getHours(); 7 | minutes.innerHTML = new Date().getMinutes(); 8 | seconds.innerHTML = new Date().getSeconds(); 9 | 10 | if (minutes.innerHTML.toString().length == 1) { 11 | minutes.innerHTML = "0" + minutes.innerHTML; 12 | } 13 | 14 | if (seconds.innerHTML.toString().length == 1) { 15 | seconds.innerHTML = "0" + seconds.innerHTML; 16 | } 17 | 18 | if (hours.innerHTML.toString().length == 1) { 19 | hours.innerHTML = "0" + hours.innerHTML; 20 | } 21 | } 22 | 23 | const interval = setInterval(clock, 1000) -------------------------------------------------------------------------------- /boss challenge 1/dicee.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dicee 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Refresh Me

14 | 15 |
16 |

Player 1

17 | 18 |
19 | 20 |
21 |

Player 2

22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | 33 | 34 | -------------------------------------------------------------------------------- /simon/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #011F3F; 4 | } 5 | 6 | #level-title { 7 | font-family: 'Press Start 2P', cursive; 8 | font-size: 3rem; 9 | margin: 5%; 10 | color: #FEF2BF; 11 | } 12 | 13 | .container { 14 | display: block; 15 | width: 50%; 16 | margin: auto; 17 | 18 | } 19 | 20 | .btn { 21 | margin: 25px; 22 | display: inline-block; 23 | height: 200px; 24 | width: 200px; 25 | border: 10px solid black; 26 | border-radius: 20%; 27 | } 28 | 29 | .game-over { 30 | background-color: red; 31 | opacity: 0.8; 32 | } 33 | 34 | .red { 35 | background-color: red; 36 | } 37 | 38 | .green { 39 | background-color: green; 40 | } 41 | 42 | .blue { 43 | background-color: blue; 44 | } 45 | 46 | .yellow { 47 | background-color: yellow; 48 | } 49 | 50 | .pressed { 51 | box-shadow: 0 0 20px white; 52 | background-color: grey; 53 | } 54 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/Context/chartContext.js: -------------------------------------------------------------------------------- 1 | import { createContext, React } from "react"; 2 | import { useState } from "react/cjs/react.development"; 3 | 4 | 5 | const ChartContext = createContext({ 6 | xaxis:'', 7 | yaxis: '', 8 | line: true, 9 | setXaxis:()=>({}), 10 | setYaxis:()=>({}), 11 | setLine:()=>({}) 12 | }) 13 | 14 | 15 | export const ChartContextProvider = (props)=>{ 16 | const [xaxis,setXaxis]=useState(''); 17 | const [yaxis,setYaxis]=useState(''); 18 | const [line,setLine]=useState(true); 19 | 20 | 21 | return( 22 | 32 | {props.children} 33 | 34 | )} 35 | 36 | export default ChartContext; -------------------------------------------------------------------------------- /rockpaperscissors/model.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --model-duration: 1s; 3 | } 4 | .model{ 5 | display: none; 6 | position: fixed; 7 | z-index: 1; 8 | left: 0; 9 | top: 0; 10 | height: 100%; 11 | width: 100%; 12 | overflow: auto; 13 | background: rgba(0,0,0,0.5); 14 | } 15 | 16 | .model-content{ 17 | background: #fff; 18 | text-align: center; 19 | margin: 10% auto; 20 | width: 350px; 21 | border-radius: 10px; 22 | padding: 3rem; 23 | box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17); 24 | animation-name: modelopen; 25 | animation-duration: var(--model-duration); 26 | } 27 | 28 | .model-content p{ 29 | font-size: 1.2rem; 30 | margin-top: 1rem; 31 | } 32 | 33 | @keyframes modelopen{ 34 | from{ 35 | opacity: 0; 36 | } 37 | to{ 38 | opacity: 1; 39 | } 40 | } -------------------------------------------------------------------------------- /Line and Pi Charts/src/DragDrop.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-header { 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | font-size: 16px; 10 | } 11 | 12 | .App-link { 13 | color: #61dafb; 14 | } 15 | 16 | @keyframes App-logo-spin { 17 | from { 18 | transform: rotate(0deg); 19 | } 20 | to { 21 | transform: rotate(360deg); 22 | } 23 | } 24 | 25 | .characters { 26 | list-style: none; 27 | padding-left: 0; 28 | } 29 | 30 | .characters li { 31 | border: solid 2px #d0d0d0; 32 | border-radius: .2em; 33 | padding: .5em .8em .5em .5em; 34 | margin-bottom: 1em; 35 | } 36 | 37 | .characters p { 38 | max-width: none; 39 | font-weight: bold; 40 | margin: 0; 41 | align-items: center; 42 | color: white; 43 | } -------------------------------------------------------------------------------- /Line and Pi Charts/src/Dropbar.css: -------------------------------------------------------------------------------- 1 | .Drag { 2 | text-align: center; 3 | } 4 | 5 | .Drag-header { 6 | display: flex; 7 | align-items: center; 8 | font-size: 16px; 9 | } 10 | 11 | .Drag-link { 12 | color: #61dafb; 13 | } 14 | 15 | @keyframes App-logo-spin { 16 | from { 17 | transform: rotate(0deg); 18 | } 19 | to { 20 | transform: rotate(360deg); 21 | } 22 | } 23 | 24 | .char { 25 | list-style: none; 26 | padding-left: 0; 27 | display: flex; 28 | } 29 | 30 | .char li { 31 | display: flex; 32 | align-items: center; 33 | border: solid 2px #d0d0d0; 34 | border-radius: .2em; 35 | padding: .5em .8em .5em .5em; 36 | margin-bottom: 1em; 37 | } 38 | 39 | .char p { 40 | max-width: none; 41 | font-weight: bold; 42 | margin: 0; 43 | align-items: center; 44 | } -------------------------------------------------------------------------------- /Venn Diagram/src/VennDiagram.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import * as d3 from "d3"; 3 | import * as venn from "venn.js"; 4 | import './VennDiagram.css'; 5 | 6 | function VennDiagram({aVal,bVal,abVal, outVal}) { 7 | 8 | useEffect(() => { 9 | const sets = [ 10 | { sets: ['A'], size: aVal, label: 'A'}, 11 | { sets: ['B'], size: bVal, label: 'B'}, 12 | { sets: ['A', 'B'], size: abVal }, 13 | ]; 14 | 15 | let chart = venn.VennDiagram(); 16 | d3.select("#venn").datum(sets).call(chart); 17 | }, [aVal,bVal,abVal]); 18 | 19 | return ( 20 |
21 |
22 |

{outVal}

23 |
24 | 25 |
26 |
27 |
28 | ) 29 | } 30 | 31 | export default VennDiagram 32 | -------------------------------------------------------------------------------- /complaints-app/failure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Failed 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Oh Looks like somethings wrong..

14 |

There was a problem please try registering your complaint again.

15 |
16 | 17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /journal/views/partial/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Daily Journal 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 | -------------------------------------------------------------------------------- /colorguessgame/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Color Game 8 | 9 | 10 |

11 | The Great
RGB
Guessing Game 12 |

13 |
14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Task 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Voila Assesment 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /mailchimp/strylesign.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | display: -ms-flexbox; 8 | display: flex; 9 | -ms-flex-align: center; 10 | align-items: center; 11 | padding-top: 40px; 12 | padding-bottom: 40px; 13 | background-color: #f5f5f5; 14 | } 15 | 16 | .form-signin { 17 | width: 100%; 18 | max-width: 330px; 19 | padding: 15px; 20 | margin: auto; 21 | } 22 | .form-signin .checkbox { 23 | font-weight: 400; 24 | } 25 | .form-signin .form-control { 26 | position: relative; 27 | box-sizing: border-box; 28 | height: auto; 29 | padding: 10px; 30 | font-size: 16px; 31 | } 32 | .form-signin .form-control:focus { 33 | z-index: 2; 34 | } 35 | .bottom { 36 | margin-bottom: 10px; 37 | border-bottom-right-radius: 0; 38 | border-bottom-left-radius: 0; 39 | } 40 | .middle{ 41 | border-radius: 0px; 42 | margin-bottom: 10px; 43 | } 44 | .top{ 45 | margin-bottom: 10px; 46 | border-top-left-radius: 0; 47 | border-top-right-radius: 0; 48 | } 49 | -------------------------------------------------------------------------------- /todolist/views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To-do List 8 | 9 | 10 | 11 |
12 |

<%= listtitle %>

13 | 14 |
15 | 16 |
17 | 18 | <% for(var i=0; i 19 |
20 | 21 |

<%= newlistitems[i] %>

22 |
23 | 24 | <% } %> 25 | 26 |
27 | 28 | 29 | 30 |
31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /simon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simon 7 | 8 | 9 | 10 | 11 | 12 |

Press A Key to Start

13 |
14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 | 22 |
23 |
24 | 25 |
26 | 27 |
28 | 29 |
30 |
31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Task 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Voila Assesment 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/Container.jsx: -------------------------------------------------------------------------------- 1 | import { memo, useContext } from 'react'; 2 | import { SourceBox } from './SourceBox'; 3 | import { StatefulTargetBox as TargetBox } from './TargetBox'; 4 | import { StatefulTargetBox as TargetBox2 } from './TargetBox2'; 5 | import { Colors } from './Colors'; 6 | import ChartContext from './Context/chartContext'; 7 | 8 | export const Container = memo(function Container() { 9 | const ctx = useContext(ChartContext) 10 | return (
11 |
12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 |
20 | 21 | {ctx.line && 22 |
23 | 24 |
25 | } 26 | 27 |
); 28 | }); -------------------------------------------------------------------------------- /complaints-app/stylesign.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | display: -ms-flexbox; 8 | display: flex; 9 | -ms-flex-align: center; 10 | align-items: center; 11 | padding-top: 40px; 12 | padding-bottom: 40px; 13 | } 14 | 15 | .text-center{ 16 | background-color: rgb(33, 220, 245); 17 | } 18 | #text-muted{ 19 | color: black; 20 | } 21 | 22 | 23 | 24 | .form-signin { 25 | width: 100%; 26 | max-width: 330px; 27 | padding: 15px; 28 | margin: auto; 29 | } 30 | .form-signin .checkbox { 31 | font-weight: 400; 32 | } 33 | .form-signin .form-control { 34 | position: relative; 35 | box-sizing: border-box; 36 | height: auto; 37 | padding: 10px; 38 | font-size: 16px; 39 | } 40 | .form-signin .form-control:focus { 41 | z-index: 2; 42 | } 43 | .bottom { 44 | margin-bottom: 10px; 45 | border-bottom-right-radius: 0; 46 | border-bottom-left-radius: 0; 47 | width: 300px; 48 | height: 300px; 49 | } 50 | .middle{ 51 | border-radius: 0px; 52 | margin-bottom: 10px; 53 | } 54 | .top{ 55 | margin-bottom: 10px; 56 | border-top-left-radius: 0; 57 | border-top-right-radius: 0; 58 | } 59 | -------------------------------------------------------------------------------- /FigmaPlugin/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GovindFigmaPlugin", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "GovindFigmaPlugin", 9 | "version": "1.0.0", 10 | "devDependencies": { 11 | "@figma/plugin-typings": "^1.58.0", 12 | "typescript": "*" 13 | } 14 | }, 15 | "node_modules/@figma/plugin-typings": { 16 | "version": "1.58.0", 17 | "resolved": "https://registry.npmjs.org/@figma/plugin-typings/-/plugin-typings-1.58.0.tgz", 18 | "integrity": "sha512-to6hFysqZYACz4VNgaBXflOVS+1pbXGNVcezDmQEMcADDkIZeAZ71Zfqf/B2YDRmU3sM1xX5Q5NkRGhjCuLOLg==", 19 | "dev": true 20 | }, 21 | "node_modules/typescript": { 22 | "version": "4.9.5", 23 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", 24 | "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", 25 | "dev": true, 26 | "bin": { 27 | "tsc": "bin/tsc", 28 | "tsserver": "bin/tsserver" 29 | }, 30 | "engines": { 31 | "node": ">=4.2.0" 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Storybook/story.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-image: linear-gradient(to bottom left, rgb(9, 137, 241), orange); 3 | } 4 | 5 | h1{ 6 | text-align: center; 7 | color: rgb(51, 253, 10); 8 | background-color:blue; 9 | width: 40%; 10 | margin: auto; 11 | font-weight: bolder; 12 | } 13 | 14 | hr{ 15 | width: 40%; 16 | } 17 | h2{ 18 | text-align: center; 19 | background-color: rgb(51, 253, 10); 20 | color: royalblue; 21 | font-weight:bold; 22 | width: 40%; 23 | margin: auto; 24 | } 25 | 26 | h3{ 27 | text-align: center; 28 | color: whitesmoke; 29 | font-weight:bold; 30 | margin: auto; 31 | } 32 | .quote{ 33 | text-align: center; 34 | background-color:teal; 35 | color:white; 36 | font-weight: bold; 37 | } 38 | 39 | img{ 40 | margin-left: 45%; 41 | padding: 10px; 42 | size: 10%; 43 | } 44 | p{ 45 | background-color: purple; 46 | color: white; 47 | margin: auto; 48 | width: 80%; 49 | text-align: center; 50 | font-size: 18px; 51 | 52 | } 53 | 54 | .rate{ 55 | text-align: center; 56 | } 57 | .video{ 58 | margin: center; 59 | } 60 | 61 | a{ 62 | text-decoration: none; 63 | font-weight: bold; 64 | } -------------------------------------------------------------------------------- /todo-frontend/bits.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 5 | box-sizing: border-box; 6 | } 7 | 8 | body{ 9 | /* background-color: rgb(14, 150, 184); */ 10 | /* background-image: url(image.jpg); */ 11 | height: 1000px; 12 | background-image: linear-gradient(to bottom left, rgb(46, 200, 72), rgb(126, 33, 180)); 13 | background-repeat: no-repeat; 14 | background-size: cover; 15 | } 16 | 17 | .container{ 18 | max-width: 800px; 19 | margin: auto; 20 | padding: 10px; 21 | } 22 | 23 | .txtb{ 24 | width: 100%; 25 | border: none; 26 | border-bottom: 2px solid #000; 27 | background: none; 28 | padding: 10px; 29 | outline: none; 30 | font-size: 18px; 31 | } 32 | 33 | h1, h3{ 34 | margin: 10px 0; 35 | text-align: center; 36 | } 37 | 38 | .task{ 39 | width: 100%; 40 | background: rgba(255, 255, 255, 0.5); 41 | padding: 18px; 42 | margin: 6px 0; 43 | overflow: hidden; 44 | transition: all 500ms ease-in; 45 | } 46 | 47 | .task i{ 48 | float: right; 49 | margin-left: 20px; 50 | cursor: pointer; 51 | } 52 | 53 | .task:hover{ 54 | transform: scale(1.05); 55 | } 56 | 57 | .comp .task{ 58 | background: rgba(0, 0, 0, 0.5); 59 | color: #fff; 60 | } 61 | -------------------------------------------------------------------------------- /clock-master/clockcss.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Lobster', cursive; 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: #ffcc00; 14 | } 15 | 16 | .clock { 17 | display: flex; 18 | } 19 | 20 | .clock div { 21 | position: relative; 22 | margin: 0 5px; 23 | width: 200px; 24 | height: 240px; 25 | } 26 | 27 | .clock div p { 28 | position: relative; 29 | display: flex; 30 | width: 200px; 31 | height: 160px; 32 | justify-content: center; 33 | align-items: center; 34 | background-color: #f2ed6f; 35 | z-index: 1; 36 | font-size: 80px; 37 | border: none; 38 | box-shadow: 0px 34px 45px 0px rgba(0,0,0,0.56); 39 | } 40 | 41 | .clock div p:first-child { 42 | border-radius: 20px 20px 0 0; 43 | } 44 | 45 | .clock div p:last-child { 46 | font-size: 30px; 47 | height: 80px; 48 | background-color: #f4e04d; 49 | border-radius: 0 0 20px 20px; 50 | } 51 | 52 | .clock div:last-child p { 53 | background-color: #512b58; 54 | color: white; 55 | } 56 | 57 | .clock div:last-child p:last-child { 58 | background-color: #2c003e; 59 | color: white; 60 | } -------------------------------------------------------------------------------- /drums/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #283149; 4 | } 5 | 6 | h1 { 7 | font-size: 5rem; 8 | color: #DBEDF3; 9 | font-family: "Arvo", cursive; 10 | text-shadow: 3px 0 #DA0463; 11 | 12 | } 13 | 14 | footer { 15 | color: #DBEDF3; 16 | font-family: sans-serif; 17 | } 18 | 19 | .w { 20 | background-image: url("images/tom1.png"); 21 | } 22 | 23 | .a { 24 | background-image: url("images/tom2.png"); 25 | } 26 | 27 | .s { 28 | background-image: url("images/tom3.png"); 29 | } 30 | 31 | .d { 32 | background-image: url("images/tom4.png"); 33 | } 34 | 35 | .j { 36 | background-image: url("images/snare.png"); 37 | } 38 | 39 | .k { 40 | background-image: url("images/crash.png"); 41 | } 42 | 43 | .l { 44 | background-image: url("images/kick.png"); 45 | } 46 | 47 | .set { 48 | margin: 10% auto; 49 | } 50 | 51 | .pressed { 52 | box-shadow: 0 3px 4px 0 #DBEDF3; 53 | opacity: 0.5; 54 | } 55 | 56 | .red { 57 | color: red; 58 | } 59 | 60 | .drum { 61 | outline: none; 62 | border: 10px solid #404B69; 63 | font-size: 5rem; 64 | font-family: 'Arvo', cursive; 65 | line-height: 2; 66 | font-weight: 900; 67 | color: #DA0463; 68 | text-shadow: 3px 0 #DBEDF3; 69 | border-radius: 15px; 70 | display: inline-block; 71 | width: 150px; 72 | height: 150px; 73 | text-align: center; 74 | margin: 10px; 75 | background-color: white; 76 | } 77 | -------------------------------------------------------------------------------- /weatherdata/app.js: -------------------------------------------------------------------------------- 1 | //jshint esversion:6 2 | 3 | 4 | const express = require("express"); 5 | const https = require("https"); 6 | const app = express(); 7 | const bodyParser = require("body-parser"); 8 | 9 | 10 | app.use(bodyParser.urlencoded({extended: true})); 11 | 12 | app.get("/",function(req,res){ 13 | res.sendFile(__dirname+ "/index.html"); 14 | }); 15 | 16 | 17 | app.post("/", function(req, res){ 18 | const city = req.body.city; 19 | const api = "258eb97aa8fffc50110cd85b3640dd9e"; 20 | const unit = "metric"; 21 | const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=258eb97aa8fffc50110cd85b3640dd9e`; 22 | https.get(url,function (response){ 23 | console.log(response.statusCode); 24 | response.on("data",function (data){ 25 | const datas = JSON.parse(data); 26 | const weatherdata = JSON.stringify(datas); 27 | const temp = datas.main.temp; 28 | const wdesc = datas.weather[0].description; 29 | const icon = datas.weather[0].icon; 30 | const imgurl = "http://openweathermap.org/img/wn/"+ icon + "@2x.png"; 31 | res.write("

The temperature is "+ temp+ "Kelvin

"); 32 | res.write("

The weather is "+ wdesc); 33 | res.write(""); 34 | 35 | }) 36 | }) 37 | }) 38 | 39 | 40 | app.listen(3000, function(){ 41 | console.log("server is running"); 42 | }) 43 | -------------------------------------------------------------------------------- /Calculator Flexbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Voila Assesment 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 |

0

13 |
14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/PiChart.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useState } from 'react'; 2 | import ReactApexChart from 'react-apexcharts'; 3 | import ChartContext from './Context/chartContext'; 4 | 5 | function PiChart() { 6 | 7 | const [xaxis,setXaxis] = useState([11,15,18,20,15]) 8 | const [yaxis,setYaxis] = useState(['Jan', 'Feb', 'Mar', 'Apr', 'May']) 9 | const ctx = useContext(ChartContext) 10 | 11 | useEffect(() => { 12 | if(ctx.xaxis === "Speed"){ 13 | setXaxis([50, 51, 35, 11, 49]) 14 | } 15 | if(ctx.xaxis === "Distance"){ 16 | setXaxis([11, 40, 25, 51, 49]) 17 | } 18 | if(ctx.xaxis === "Time"){ 19 | setXaxis([17, 46, 28, 57, 42]) 20 | } 21 | 22 | }, [ctx]) 23 | 24 | const series = xaxis, 25 | options = { 26 | chart: { 27 | type: 'donut', 28 | }, 29 | labels: yaxis, 30 | responsive: [{ 31 | breakpoint: 480, 32 | options: { 33 | chart: { 34 | width: 200 35 | }, 36 | legend: { 37 | position: 'top' 38 | } 39 | } 40 | }] 41 | } 42 | return ( 43 |
44 | 45 |
46 | ) 47 | } 48 | 49 | export default PiChart 50 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/SourceBox.jsx: -------------------------------------------------------------------------------- 1 | import { useState,useMemo, memo, } from 'react'; 2 | import { useDrag } from 'react-dnd'; 3 | import { Colors } from './Colors'; 4 | const style = { 5 | border: '1px solid gray', 6 | padding: '0.5rem', 7 | margin: '0.5rem', 8 | }; 9 | export const SourceBox = memo(function SourceBox({ color, children, }) { 10 | const [forbidDrag, setForbidDrag] = useState(false); 11 | const [{ isDragging }, drag] = useDrag(() => ({ 12 | type: color, 13 | canDrag: !forbidDrag, 14 | collect: (monitor) => ({ 15 | isDragging: monitor.isDragging(), 16 | }), 17 | }), [forbidDrag, color]); 18 | 19 | const backgroundColor = useMemo(() => { 20 | switch (color) { 21 | case Colors.BLUE: 22 | return 'lightblue'; 23 | case Colors.SPEED: 24 | return 'lightblue'; 25 | case Colors.DISTANCE: 26 | return 'lightblue'; 27 | default: 28 | return 'lightgoldenrodyellow'; 29 | } 30 | }, [color]); 31 | const containerStyle = useMemo(() => ({ 32 | ...style, 33 | backgroundColor, 34 | opacity: isDragging ? 0.8 : 1, 35 | cursor: forbidDrag ? 'default' : 'move', 36 | }), [isDragging, forbidDrag, backgroundColor]); 37 | return (
38 | {color} 39 | {children} 40 |
); 41 | }); 42 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/App.css: -------------------------------------------------------------------------------- 1 | #dropVal { 2 | padding: 10px; 3 | outline: none; 4 | } 5 | 6 | .chart { 7 | display: grid; 8 | place-items: center; 9 | } 10 | 11 | .App{ 12 | display: flex; 13 | 14 | } 15 | 16 | .dragdrop { 17 | display: grid; 18 | place-items: center; 19 | margin-top: 40px; 20 | } 21 | 22 | .sidebar { 23 | height: 725px; 24 | width: 20%; 25 | background-image: linear-gradient(#2B32B2,#1488CC); 26 | } 27 | 28 | .xbox { 29 | outline: none; 30 | border: none; 31 | padding: 15px; 32 | border-radius: 5px; 33 | margin-bottom: 15px; 34 | } 35 | 36 | .ybox { 37 | outline: none; 38 | border: none; 39 | padding: 15px; 40 | border-radius: 5px; 41 | } 42 | 43 | .sidebar > h2 { 44 | color: white; 45 | margin-top:90%; 46 | display: grid; 47 | place-items: center; 48 | } 49 | 50 | .drop { 51 | background-image: linear-gradient(#20BDFF,#A5FECB); 52 | width:fit-content; 53 | margin: auto; 54 | border-radius: 2px; 55 | } 56 | 57 | .rest{ 58 | display: flex; 59 | justify-content: center; 60 | align-items: center; 61 | width: 80%; 62 | } 63 | 64 | .dropbar{ 65 | margin-bottom: 10px; 66 | margin-left: 15px; 67 | } 68 | 69 | .dropandchart{ 70 | display: flex; 71 | flex-direction: column; 72 | align-items: center; 73 | justify-content: center; 74 | } 75 | 76 | .axisinputbox > h3 { 77 | color: white; 78 | } -------------------------------------------------------------------------------- /pirple_assigns/css/recipecss.css: -------------------------------------------------------------------------------- 1 | .full-body{ 2 | background-color: aqua; 3 | } 4 | 5 | .paragraph{ 6 | font-size: 30px; 7 | } 8 | 9 | .unordered{ 10 | font-size: 20px; 11 | margin-left: 60px; 12 | list-style-image: url(https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/microsoft/209/cupcake_1f9c1.png); 13 | font-size: 50px; 14 | } 15 | 16 | #ordered1{ 17 | font-size: 40px; 18 | list-style: upper-roman; 19 | margin-left: 30px; 20 | } 21 | 22 | #ordered2{ 23 | font-size: 40px; 24 | list-style: upper-roman; 25 | margin-left: 30px; 26 | } 27 | 28 | .spanclass{ 29 | font-style: italic; 30 | } 31 | #lastspan{ 32 | text-decoration: underline; 33 | } 34 | #firstspan{ 35 | color:red; 36 | font-style: normal; 37 | 38 | } 39 | 40 | #recipe1{ 41 | color: lightcoral; 42 | } 43 | #recipe3{ 44 | color: lightcoral; 45 | } 46 | 47 | #recipe5{ 48 | color: lightcoral; 49 | } 50 | 51 | .heading{ 52 | padding-bottom: 20px; 53 | font-weight: bold; 54 | text-decoration: underline; 55 | font-size: 60px; 56 | } 57 | 58 | .second-heading{ 59 | padding-bottom: 20px; 60 | font-size: 50px; 61 | text-decoration: underline; 62 | } 63 | 64 | .third-heading{ 65 | padding-bottom: 20px; 66 | font-size: 50px; 67 | } 68 | 69 | .fourth-heading{ 70 | padding-bottom: 20px; 71 | font-size: 50px; 72 | text-decoration: underline; 73 | } 74 | 75 | /* https://www.w3schools.com/cssref/ */ -------------------------------------------------------------------------------- /todolist/app.js: -------------------------------------------------------------------------------- 1 | //jshint esversion:6 2 | 3 | const express = require("express"); 4 | const app = express(); 5 | const bodyParser = require("body-parser"); 6 | const https = require("https"); 7 | var items= ["buy food", "eat food"]; 8 | var workitems = []; 9 | 10 | app.set('view engine', 'ejs'); 11 | app.use(express.static("public")); 12 | app.use(bodyParser.urlencoded({extended:true})); 13 | 14 | app.post("/", function (req,res){ 15 | var item = req.body.newitem; 16 | if(req.body.list === "Work"){ 17 | workitems.push(item); 18 | res.redirect("/work"); 19 | } 20 | else{ 21 | items.push(item); 22 | res.redirect("/"); 23 | } 24 | }) 25 | 26 | app.get("/work",function (req, res){ 27 | res.render("index", {listtitle: "Work list", newlistitems: workitems}); 28 | }) 29 | 30 | app.post("/work" , function (req,res){ 31 | let item = req.body.newitem; 32 | workitems.push(item); 33 | res.redirect("/work"); 34 | }) 35 | 36 | 37 | app.get("/", function (req, res){ 38 | var today = new Date(); 39 | 40 | var options = { 41 | weekday: "long", 42 | day: "numeric", 43 | month: "long" 44 | }; 45 | 46 | var day = today.toLocaleDateString("en-US", options); 47 | 48 | res.render("index",{listtitle: day, newlistitems: items}); 49 | }) 50 | 51 | app.get("/about",function(req,res){ 52 | res.render("about"); 53 | }) 54 | 55 | app.listen("3000", function(){ 56 | console.log("Server running"); 57 | }); 58 | -------------------------------------------------------------------------------- /colorguessgame/colors.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #232323; 3 | margin: 0; 4 | font-family: "Montserrat","Segoe UI Light","Avenir"; 5 | } 6 | .square{ 7 | width: 30%; 8 | padding-bottom: 30%; 9 | float: left; 10 | margin: 1.66%; 11 | border-radius: 15%; 12 | transition: background 0.6s; 13 | -webkit-transition: background 0.6s; 14 | -moz-transition: background 0.6s; 15 | } 16 | #container{ 17 | margin: 2vh auto; 18 | max-width: 700px; 19 | } 20 | 21 | h1{ 22 | color: white; 23 | font-size: 5vh; 24 | font-weight: normal; 25 | line-height: 1.1; 26 | text-transform: uppercase; 27 | text-align: center; 28 | background-color: steelblue; 29 | margin: 0; 30 | padding: 3vh 0; 31 | } 32 | 33 | #stripe{ 34 | background-color: white; 35 | height: 5vh; 36 | text-align: center; 37 | } 38 | 39 | .selected{ 40 | color: white; 41 | background: steelblue; 42 | } 43 | 44 | #coldis{ 45 | font-size: 200%; 46 | font-weight: bold; 47 | } 48 | 49 | button{ 50 | border:none; 51 | background:none; 52 | text-transform: uppercase; 53 | height: 100%; 54 | font-size: inherit; 55 | font-weight: bold; 56 | color: steelblue; 57 | outline: none; 58 | letter-spacing: 0.2vh; 59 | transition: all 0.3s; 60 | -webkit-transition: all 0.3s; 61 | -moz-transition: all 0.3s; 62 | } 63 | 64 | button:hover{ 65 | color: white; 66 | background: steelblue; 67 | } 68 | 69 | #message{ 70 | display: inline-block; 71 | width: 20%; 72 | } -------------------------------------------------------------------------------- /Venn Diagram/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import VennDiagram from './VennDiagram'; 3 | import './App.css'; 4 | 5 | 6 | function App() { 7 | 8 | const [aVal, setaVal] = useState(18); 9 | const [bVal, setbVal] = useState(17); 10 | const [abVal, setabVal] = useState(4); 11 | const [outVal, setoutVal] = useState(19); 12 | 13 | return ( 14 | 15 |
16 | 17 |
18 | 19 |
20 |

A:

21 | setaVal(e.target.value)} value={aVal} placeholder="Enter value for A" type="number"/> 22 |
23 | 24 |
25 |

B:

26 | setbVal(e.target.value)} value={bVal} placeholder="Enter value for B" type="number"/> 27 |
28 | 29 |
30 |

A&B :

31 | setabVal(e.target.value)} value={abVal} placeholder="Enter value for A intersection B" type="number"/> 32 |
33 | 34 |
35 |

None:

36 | setoutVal(e.target.value)} value={outVal} placeholder="Enter the outside value " type="number"/> 37 |
38 | 39 |
40 | 41 |
42 | 48 |
49 | 50 |
51 | 52 | ); 53 | }; 54 | 55 | export default App; -------------------------------------------------------------------------------- /mailchimp/app.js: -------------------------------------------------------------------------------- 1 | //jshint esversion:6 2 | 3 | const express = require("express"); 4 | const bodyParser = require("body-parser"); 5 | const request = require("request"); 6 | const app = express(); 7 | const https = require("https"); 8 | 9 | app.use(express.static("public")); 10 | app.use(bodyParser.urlencoded({extended: true})); 11 | 12 | 13 | app.post("/",function (req, res){ 14 | const first = req.body.first; 15 | const last = req.body.last; 16 | const email = req.body.mail; 17 | const data = { 18 | 19 | members:[ 20 | { 21 | email_address: email, 22 | status: "subscribed", 23 | merge_fields:{ 24 | FNAME: first, 25 | LNAME: last, 26 | } 27 | } 28 | ] 29 | } 30 | const jsondata= JSON.stringify(data); 31 | const url = "https://usX.api.mailchimp.com/3.0/lists/(apikey)"; 32 | const options = { 33 | method: "POST", 34 | auth: "govind:(listkey)", 35 | } 36 | const request= https.request(url,options,function(response){ 37 | response.on("data",function(data){ 38 | console.log(JSON.parse(data)); 39 | }) 40 | }) 41 | 42 | request.write(jsondata); 43 | request.end(); 44 | 45 | }); 46 | 47 | 48 | app.get("/", function(req,res){ 49 | res.sendFile(__dirname+"/signup.html"); 50 | }) 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | app.listen(process.env.PORT || 3000,function(){ 71 | console.log("Server is up"); 72 | }); 73 | -------------------------------------------------------------------------------- /todo-frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TodoList 5 | 6 | 7 | 8 | 9 |

My To-Do List



10 |
11 | 12 |




13 |

Not Completed!

14 |
15 | task 16 | 17 | 18 |
19 |
20 | task 21 | 22 | 23 |
24 |
25 | task 26 | 27 | 28 |
29 |
30 | 31 |


32 |

Completed!

33 |
34 | task 35 | 36 |
37 |
38 | task 39 | 40 |
41 |
42 | task 43 | 44 |
45 |
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /rockpaperscissors/rock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Rock Paper Scissors 11 | 12 | 13 | 18 |
19 |
20 |

Rock Paper Scissors

21 | 22 |
23 |
26 |
27 |

Make Your Selection

28 |
29 | 30 | 31 | 32 |
33 |
34 | 35 |
36 |
37 | 40 |
41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from 'react'; 2 | import LineChart from './LineChart.js'; 3 | import PiChart from './PiChart.js'; 4 | import Example from './Example' 5 | import { DndProvider } from 'react-dnd' 6 | import { HTML5Backend } from 'react-dnd-html5-backend' 7 | import { Select, MenuItem, FormControl, InputLabel} from '@material-ui/core'; 8 | import ChartContext from './Context/chartContext'; 9 | import './App.css'; 10 | 11 | 12 | function App() { 13 | 14 | const [chart,setChart] = useState(); 15 | const [option,setOption] = useState(); 16 | const ctx = useContext(ChartContext); 17 | 18 | 19 | const changeFunc = (e) => { 20 | setOption(e.target.value); 21 | console.log(option); 22 | 23 | if(option===20) { 24 | ctx.setLine(true); 25 | setChart(); 26 | } 27 | else { 28 | ctx.setLine(false); 29 | setChart(); 30 | } 31 | } 32 | 33 | 34 | return ( 35 |
36 | 37 |
38 |

CHARTS

39 | 40 |
41 | 42 | Line Chart 43 | 47 | 48 |
49 |
50 | 51 |
52 | 53 |
54 | 55 | 56 | 57 |
58 | 59 |
60 | {chart} 61 |
62 | 63 |
64 | 65 |
66 | 67 | ); 68 | } 69 | 70 | export default App; 71 | -------------------------------------------------------------------------------- /drums/index.js: -------------------------------------------------------------------------------- 1 | var numberOfDrumButtons = document.querySelectorAll(".drum").length; 2 | 3 | for (var i = 0; i < numberOfDrumButtons; i++) { 4 | 5 | document.querySelectorAll(".drum")[i].addEventListener("click", function() { 6 | 7 | var buttonInnerHTML = this.innerHTML; 8 | 9 | makeSound(buttonInnerHTML); 10 | 11 | buttonAnimation(buttonInnerHTML); 12 | 13 | }); 14 | 15 | } 16 | 17 | document.addEventListener("keypress", function(event) { 18 | 19 | makeSound(event.key); 20 | 21 | buttonAnimation(event.key); 22 | 23 | }); 24 | 25 | 26 | function makeSound(key) { 27 | 28 | switch (key) { 29 | case "w": 30 | var tom1 = new Audio("sounds/tom-1.mp3"); 31 | tom1.play(); 32 | break; 33 | 34 | case "a": 35 | var tom2 = new Audio("sounds/tom-2.mp3"); 36 | tom2.play(); 37 | break; 38 | 39 | case "s": 40 | var tom3 = new Audio('sounds/tom-3.mp3'); 41 | tom3.play(); 42 | break; 43 | 44 | case "d": 45 | var tom4 = new Audio('sounds/tom-4.mp3'); 46 | tom4.play(); 47 | break; 48 | 49 | case "j": 50 | var snare = new Audio('sounds/snare.mp3'); 51 | snare.play(); 52 | break; 53 | 54 | case "k": 55 | var crash = new Audio('sounds/crash.mp3'); 56 | crash.play(); 57 | break; 58 | 59 | case "l": 60 | var kick = new Audio('sounds/kick-bass.mp3'); 61 | kick.play(); 62 | break; 63 | 64 | 65 | default: console.log(key); 66 | 67 | } 68 | } 69 | 70 | 71 | function buttonAnimation(currentKey) { 72 | 73 | var activeButton = document.querySelector("." + currentKey); 74 | 75 | activeButton.classList.add("pressed"); 76 | 77 | setTimeout(function() { 78 | activeButton.classList.remove("pressed"); 79 | }, 100); 80 | 81 | } 82 | -------------------------------------------------------------------------------- /FigmaPlugin/README.md: -------------------------------------------------------------------------------- 1 | Below are the steps to get your plugin running. You can also find instructions at: 2 | 3 | https://www.figma.com/plugin-docs/setup/ 4 | 5 | This plugin template uses Typescript and NPM, two standard tools in creating JavaScript applications. 6 | 7 | First, download Node.js which comes with NPM. This will allow you to install TypeScript and other 8 | libraries. You can find the download link here: 9 | 10 | https://nodejs.org/en/download/ 11 | 12 | Next, install TypeScript using the command: 13 | 14 | npm install -g typescript 15 | 16 | Finally, in the directory of your plugin, get the latest type definitions for the plugin API by running: 17 | 18 | npm install --save-dev @figma/plugin-typings 19 | 20 | If you are familiar with JavaScript, TypeScript will look very familiar. In fact, valid JavaScript code 21 | is already valid Typescript code. 22 | 23 | TypeScript adds type annotations to variables. This allows code editors such as Visual Studio Code 24 | to provide information about the Figma API while you are writing code, as well as help catch bugs 25 | you previously didn't notice. 26 | 27 | For more information, visit https://www.typescriptlang.org/ 28 | 29 | Using TypeScript requires a compiler to convert TypeScript (code.ts) into JavaScript (code.js) 30 | for the browser to run. 31 | 32 | We recommend writing TypeScript code using Visual Studio code: 33 | 34 | 1. Download Visual Studio Code if you haven't already: https://code.visualstudio.com/. 35 | 2. Open this directory in Visual Studio Code. 36 | 3. Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item, 37 | then select "npm: watch". You will have to do this again every time 38 | you reopen Visual Studio Code. 39 | 40 | That's it! Visual Studio Code will regenerate the JavaScript file every time you save. 41 | -------------------------------------------------------------------------------- /complaints-app/app.js: -------------------------------------------------------------------------------- 1 | //jshint esversion:6 2 | 3 | const express = require("express"); 4 | const bodyParser = require("body-parser"); 5 | const request = require("request"); 6 | const app = express(); 7 | const https = require("https"); 8 | 9 | app.use(express.static("public")); 10 | app.use(bodyParser.urlencoded({extended: true})); 11 | 12 | app.post("/failure",function(req,res){ 13 | res.redirect("/"); 14 | }) 15 | 16 | 17 | app.post("/",function (req, res){ 18 | const name = req.body.name; 19 | const mail = req.body.mailid; 20 | const com = req.body.complaint; 21 | const data = { 22 | 23 | members:[ 24 | { 25 | email_address: mail, 26 | Complaint: com, 27 | status: "subscribed", 28 | merge_fields:{ 29 | NAME: name, 30 | } 31 | } 32 | ] 33 | } 34 | const jsondata= JSON.stringify(data); 35 | const url = "https://usX.api.mailchimp.com/3.0/lists/apikey"; 36 | const options = { 37 | method: "POST", 38 | auth: "govind:List key", 39 | } 40 | const request= https.request(url,options,function(response){ 41 | if(response.statusCode===200){ 42 | res.sendFile(__dirname + "/success.html"); 43 | } 44 | else { 45 | res.sendFile(__dirname + "/failure.html") 46 | } 47 | response.on("data",function(data){ 48 | console.log(JSON.parse(data)); 49 | }) 50 | }) 51 | 52 | request.write(jsondata); 53 | request.end(); 54 | 55 | }); 56 | 57 | 58 | app.get("/", function(req,res){ 59 | res.sendFile(__dirname+"/signup.html"); 60 | }) 61 | 62 | 63 | 64 | app.listen(process.env.PORT || 3000,function(){ 65 | console.log("Server is up"); 66 | }); 67 | -------------------------------------------------------------------------------- /todolist/public/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-color: #E4E9FD; 3 | background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%); 4 | min-height: 1000px; 5 | font-family: 'helvetica neue'; 6 | } 7 | 8 | h1 { 9 | color: #fff; 10 | padding: 10px; 11 | } 12 | 13 | .box { 14 | max-width: 400px; 15 | margin: 50px auto; 16 | background: white; 17 | border-radius: 5px; 18 | box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3); 19 | } 20 | 21 | #heading { 22 | background-color: #A683E3; 23 | text-align: center; 24 | } 25 | 26 | .item { 27 | min-height: 70px; 28 | display: flex; 29 | align-items: center; 30 | border-bottom: 1px solid #F1F1F1; 31 | } 32 | 33 | .item:last-child { 34 | border-bottom: 0; 35 | } 36 | 37 | input:checked+p { 38 | text-decoration: line-through; 39 | text-decoration-color: #A683E3; 40 | } 41 | 42 | input[type="checkbox"] { 43 | margin: 20px; 44 | } 45 | 46 | p { 47 | margin: 0; 48 | padding: 20px; 49 | font-size: 20px; 50 | font-weight: 200; 51 | color: #00204a; 52 | } 53 | 54 | form { 55 | text-align: center; 56 | margin-left: 20px; 57 | } 58 | 59 | button { 60 | min-height: 50px; 61 | width: 50px; 62 | border-radius: 50%; 63 | border-color: transparent; 64 | background-color: #A683E3; 65 | color: #fff; 66 | font-size: 30px; 67 | padding-bottom: 6px; 68 | border-width: 0; 69 | } 70 | 71 | input[type="text"] { 72 | text-align: center; 73 | height: 60px; 74 | top: 10px; 75 | border: none; 76 | background: transparent; 77 | font-size: 20px; 78 | font-weight: 200; 79 | width: 313px; 80 | } 81 | 82 | input[type="text"]:focus { 83 | outline: none; 84 | box-shadow: inset 0 -3px 0 0 #A683E3; 85 | } 86 | 87 | ::placeholder { 88 | color: grey; 89 | opacity: 1; 90 | } 91 | 92 | footer { 93 | color: white; 94 | color: rgba(0, 0, 0, 0.5); 95 | text-align: center; 96 | } 97 | -------------------------------------------------------------------------------- /merkle/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 18 | 19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 20 | 21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 22 | 23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | -------------------------------------------------------------------------------- /Venn Diagram/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Line and Pi Charts/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /VenndiagramReact/src/App.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} from "react"; 2 | import * as d3 from "d3"; 3 | import * as venn from "venn.js"; 4 | import './App.css'; 5 | 6 | 7 | function App() { 8 | 9 | const [aVal, setaVal] = useState(18); 10 | const [bVal, setbVal] = useState(17); 11 | const [abVal, setabVal] = useState(4); 12 | const [outVal, setoutVal] = useState(19); 13 | 14 | useEffect(() => { 15 | const sets = [ 16 | { sets: ['A'], size: aVal, label: 'A'}, 17 | { sets: ['B'], size: bVal, label: 'B'}, 18 | { sets: ['A', 'B'], size: abVal }, 19 | ]; 20 | 21 | let chart = venn.VennDiagram(); 22 | d3.select("#venn").datum(sets).call(chart); 23 | }, [aVal,bVal,abVal]); 24 | 25 | return ( 26 | 27 |
28 | 29 |
30 | 31 |
32 | 33 | 34 |

A:

35 | setaVal(e.target.value)} value={aVal} placeholder="Enter value for A" type="number"/> 36 |
37 | 38 |
39 |

B:

40 | setbVal(e.target.value)} value={bVal} placeholder="Enter value for B" type="number"/> 41 |
42 | 43 |
44 |

A&B :

45 | setabVal(e.target.value)} value={abVal} placeholder="Enter value for A intersection B" type="number"/> 46 |
47 | 48 |
49 |

None:

50 | setoutVal(e.target.value)} value={outVal} placeholder="Enter the outside value " type="number"/> 51 |
52 | 53 |
54 | 55 |
56 | 57 |
58 |

{outVal}

59 |
60 | 61 |
62 |
63 | 64 |
65 | 66 |
67 | 68 | ); 69 | }; 70 | 71 | export default App; -------------------------------------------------------------------------------- /Line and Pi Charts/src/LineChart.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, useContext } from 'react'; 2 | import ReactApexChart from 'react-apexcharts'; 3 | import ChartContext from './Context/chartContext'; 4 | 5 | function LineChart() { 6 | 7 | const [xAxis,setXaxis] = useState(); 8 | const [yAxis,setYaxis] = useState(); 9 | const ctx = useContext(ChartContext); 10 | 11 | useEffect(() => { 12 | if(ctx.xaxis === "Time"){ 13 | setYaxis([10,20,30,40,50,60,80,90]) 14 | } 15 | if(ctx.xaxis === "Speed"){ 16 | setYaxis([50, 51, 35, 11, 49, 62, 69, 91, 148]) 17 | } 18 | if(ctx.xaxis === "Distance"){ 19 | setYaxis([10, 40, 25, 51, 45, 67, 72, 91, 141]) 20 | } 21 | 22 | if(ctx.yaxis === "Speed"){ 23 | setXaxis([50, 51, 35, 11, 49, 62, 69, 91, 148]) 24 | } 25 | if(ctx.yaxis === "Distance"){ 26 | setXaxis([10, 40, 25, 51, 45, 67, 72, 91, 141]) 27 | } 28 | if(ctx.yaxis === "Time"){ 29 | setXaxis([10,20,30,40,50,60,80,90]) 30 | } 31 | 32 | }, [ctx]); 33 | 34 | 35 | const series= [{ 36 | name: "Distance", 37 | data: xAxis 38 | }], 39 | options= { 40 | chart: { 41 | height: 350, 42 | type: 'line', 43 | zoom: { 44 | enabled: true 45 | } 46 | }, 47 | dataLabels: { 48 | enabled: false 49 | }, 50 | stroke: { 51 | curve: 'straight' 52 | }, 53 | title: { 54 | text: `${ctx.yaxis} ${ctx.xaxis} graph`, 55 | align: 'center' 56 | }, 57 | grid: { 58 | row: { 59 | colors: ['red', 'transparent'], // takes an array which will be repeated on columns 60 | opacity: 0.5 61 | }, 62 | }, 63 | xaxis: { 64 | categories: yAxis, 65 | } 66 | } 67 | 68 | return ( 69 |
70 | 71 |
72 | ); 73 | } 74 | 75 | export default LineChart; 76 | -------------------------------------------------------------------------------- /simon/game.js: -------------------------------------------------------------------------------- 1 | 2 | var buttonColours = ["red", "blue", "green", "yellow"]; 3 | 4 | var gamePattern = []; 5 | var userClickedPattern = []; 6 | 7 | var started = false; 8 | var level = 0; 9 | 10 | $(document).keypress(function() { 11 | if (!started) { 12 | $("#level-title").text("Level " + level); 13 | nextSequence(); 14 | started = true; 15 | } 16 | }); 17 | 18 | $(".btn").click(function() { 19 | 20 | var userChosenColour = $(this).attr("id"); 21 | userClickedPattern.push(userChosenColour); 22 | 23 | playSound(userChosenColour); 24 | animatePress(userChosenColour); 25 | 26 | checkAnswer(userClickedPattern.length-1); 27 | }); 28 | 29 | function checkAnswer(currentLevel) { 30 | 31 | if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) { 32 | if (userClickedPattern.length === gamePattern.length){ 33 | setTimeout(function () { 34 | nextSequence(); 35 | }, 1000); 36 | } 37 | } else { 38 | playSound("wrong"); 39 | $("body").addClass("game-over"); 40 | $("#level-title").text("Game Over, Press Any Key to Restart"); 41 | 42 | setTimeout(function () { 43 | $("body").removeClass("game-over"); 44 | }, 200); 45 | 46 | startOver(); 47 | } 48 | } 49 | 50 | 51 | function nextSequence() { 52 | userClickedPattern = []; 53 | level++; 54 | $("#level-title").text("Level " + level); 55 | var randomNumber = Math.floor(Math.random() * 4); 56 | var randomChosenColour = buttonColours[randomNumber]; 57 | gamePattern.push(randomChosenColour); 58 | 59 | $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100); 60 | playSound(randomChosenColour); 61 | } 62 | 63 | function animatePress(currentColor) { 64 | $("#" + currentColor).addClass("pressed"); 65 | setTimeout(function () { 66 | $("#" + currentColor).removeClass("pressed"); 67 | }, 100); 68 | } 69 | 70 | function playSound(name) { 71 | var audio = new Audio( name+ ".mp3"); 72 | audio.play(); 73 | } 74 | 75 | function startOver() { 76 | level = 0; 77 | gamePattern = []; 78 | started = false; 79 | } 80 | -------------------------------------------------------------------------------- /Line and Pi Charts/src/DropBar.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; 3 | import './Dropbar.css'; 4 | 5 | const finalSpaceCharacters = [ 6 | { 7 | id: 'gary', 8 | name:'Time' 9 | }, 10 | { 11 | id: 'cato', 12 | name: 'Speed', 13 | }, 14 | { 15 | id: 'kvn', 16 | name: 'Distance', 17 | }, 18 | { 19 | id: 'mooncake', 20 | name: 'Revenue', 21 | }, 22 | { 23 | id: 'quinn', 24 | name: 'Subscribers', 25 | } 26 | ] 27 | 28 | function DropBar() { 29 | const [characters, updateCharacters] = useState(finalSpaceCharacters); 30 | 31 | function handleOnDragEnd(result) { 32 | if (!result.destination) return; 33 | 34 | const items = Array.from(characters); 35 | const [reorderedItem] = items.splice(result.source.index, 1); 36 | items.splice(result.destination.index, 0, reorderedItem); 37 | 38 | updateCharacters(items); 39 | } 40 | 41 | return ( 42 |
43 |
44 | 45 | 46 | {(provided) => ( 47 |
    48 | {characters.map(({id, name}, index) => { 49 | return ( 50 | 51 | {(provided) => ( 52 |
  • 53 |

    54 | { name } 55 |

    56 |
    • 57 | )} 58 |     59 | ); 60 | })} 61 | {provided.placeholder} 62 |
63 | )} 64 | 65 | 66 |
67 |
68 | ); 69 | } 70 | 71 | export default DropBar; -------------------------------------------------------------------------------- /Line and Pi Charts/src/DragDrop.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; 3 | import './DragDrop.css'; 4 | 5 | const finalSpaceCharacters = [ 6 | { 7 | id: 'gary', 8 | name:'Time' 9 | }, 10 | { 11 | id: 'cato', 12 | name: 'Speed', 13 | }, 14 | { 15 | id: 'kvn', 16 | name: 'Distance', 17 | }, 18 | { 19 | id: 'mooncake', 20 | name: 'Revenue', 21 | }, 22 | { 23 | id: 'quinn', 24 | name: 'Subscribers', 25 | } 26 | ] 27 | 28 | function DragDrop() { 29 | const [characters, updateCharacters] = useState(finalSpaceCharacters); 30 | 31 | function handleOnDragEnd(result) { 32 | if (!result.destination) return; 33 | 34 | const items = Array.from(characters); 35 | const [reorderedItem] = items.splice(result.source.index, 1); 36 | items.splice(result.destination.index, 0, reorderedItem); 37 | 38 | updateCharacters(items); 39 | } 40 | 41 | return ( 42 |
43 |
44 | 45 | 46 | {(provided) => ( 47 |
    48 | {characters.map(({id, name}, index) => { 49 | return ( 50 | 51 | {(provided) => ( 52 |
  • 53 |

    54 | { name } 55 |

    56 |
    • 57 | )} 58 |     59 | ); 60 | })} 61 | {provided.placeholder} 62 |
63 | )} 64 | 65 | 66 |
67 |
68 | ); 69 | } 70 | 71 | export default DragDrop; -------------------------------------------------------------------------------- /Line and Pi Charts/src/TargetBox2.js: -------------------------------------------------------------------------------- 1 | import { useState, useCallback, memo, useContext } from 'react'; 2 | import { useDrop } from 'react-dnd'; 3 | import { Colors } from './Colors'; 4 | import ChartContext from './Context/chartContext'; 5 | 6 | const style = { 7 | border: '1px solid red', 8 | height: '7rem', 9 | width: '15rem', 10 | padding: '2rem', 11 | textAlign: 'center', 12 | margin:'20px', 13 | borderRadius: '15px' 14 | }; 15 | const TargetBox = memo(function TargetBox({ onDrop, lastDroppedColor, }) { 16 | const [{ isOver, draggingColor, canDrop }, drop] = useDrop(() => ({ 17 | accept: [Colors.BLUE,Colors.SPEED, Colors.DISTANCE], 18 | drop(_item, monitor) { 19 | onDrop(monitor.getItemType()); 20 | return undefined; 21 | }, 22 | collect: (monitor) => ({ 23 | isOver: monitor.isOver(), 24 | canDrop: monitor.canDrop(), 25 | draggingColor: monitor.getItemType(), 26 | }), 27 | }), [onDrop]); 28 | const opacity = isOver ? 1 : 0.7; 29 | let backgroundColor = '#fff'; 30 | switch (draggingColor) { 31 | case Colors.BLUE: 32 | backgroundColor = 'lightblue'; 33 | break; 34 | case Colors.SPEED: 35 | backgroundColor = 'lightgoldenrodyellow'; 36 | break; 37 | case Colors.DISTANCE: 38 | backgroundColor = 'lightgoldenrodyellow'; 39 | break; 40 | default: 41 | break; 42 | } 43 | return (
44 |

Drop Y axis here.

45 | 46 | {!canDrop && lastDroppedColor &&

Last dropped: {lastDroppedColor}

} 47 |
); 48 | }); 49 | export const StatefulTargetBox = (props) => { 50 | const ctx =useContext(ChartContext); 51 | const [lastDroppedColor, setLastDroppedColor] = useState(null); 52 | const handleDrop = useCallback((color) => setLastDroppedColor(color), []); 53 | ctx.setYaxis(lastDroppedColor); 54 | return (); }; -------------------------------------------------------------------------------- /Line and Pi Charts/src/TargetBox.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useCallback, memo, useContext } from 'react'; 2 | import { useDrop } from 'react-dnd'; 3 | import { Colors } from './Colors'; 4 | import ChartContext from './Context/chartContext'; 5 | 6 | const style = { 7 | border: '1px solid red', 8 | height: '7rem', 9 | width: '15rem', 10 | padding: '2rem', 11 | textAlign: 'center', 12 | margin:'20px', 13 | borderRadius: '15px' 14 | }; 15 | const TargetBox = memo(function TargetBox({ onDrop, lastDroppedColor, }) { 16 | const [{ isOver, draggingColor, canDrop }, drop] = useDrop(() => ({ 17 | accept: [Colors.BLUE,Colors.SPEED, Colors.DISTANCE], 18 | drop(_item, monitor) { 19 | onDrop(monitor.getItemType()); 20 | return undefined; 21 | }, 22 | collect: (monitor) => ({ 23 | isOver: monitor.isOver(), 24 | canDrop: monitor.canDrop(), 25 | draggingColor: monitor.getItemType(), 26 | }), 27 | }), [onDrop]); 28 | const opacity = isOver ? 1 : 0.7; 29 | let backgroundColor = '#fff'; 30 | switch (draggingColor) { 31 | case Colors.BLUE: 32 | backgroundColor = 'lightblue'; 33 | break; 34 | case Colors.SPEED: 35 | backgroundColor = 'lightgoldenrodyellow'; 36 | break; 37 | case Colors.DISTANCE: 38 | backgroundColor = 'lightgoldenrodyellow'; 39 | break; 40 | default: 41 | break; 42 | } 43 | return (
44 |

Drop X axis here.

45 | 46 | {!canDrop && lastDroppedColor &&

Last dropped: {lastDroppedColor}

} 47 | 48 |
49 |
50 | 51 |
); 52 | }); 53 | export const StatefulTargetBox = (props) => { 54 | const ctx = useContext(ChartContext); 55 | const [lastDroppedColor, setLastDroppedColor] = useState(null); 56 | const handleDrop = useCallback((color) => setLastDroppedColor(color), []); 57 | ctx.setXaxis(lastDroppedColor); 58 | return (); 59 | }; 60 | -------------------------------------------------------------------------------- /relaxer app/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #224941; 9 | color: #fff; 10 | font-family: 'Montserrat', sans-serif; 11 | min-height: 100vh; 12 | overflow: hidden; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | margin: 0; 17 | } 18 | 19 | .container { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | margin: auto; 24 | height: 300px; 25 | width: 300px; 26 | position: relative; 27 | transform: scale(1); 28 | } 29 | 30 | .circle { 31 | background-color: #010f1c; 32 | height: 100%; 33 | width: 100%; 34 | border-radius: 50%; 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | z-index: -1; 39 | } 40 | 41 | .gradient-circle { 42 | background: conic-gradient( 43 | #55b7a4 0%, 44 | #4ca493 40%, 45 | #fff 40%, 46 | #fff 60%, 47 | #336d62 60%, 48 | #2a5b52 100% 49 | ); 50 | height: 320px; 51 | width: 320px; 52 | z-index: -2; 53 | border-radius: 50%; 54 | position: absolute; 55 | top: -10px; 56 | left: -10px; 57 | } 58 | 59 | .pointer { 60 | background-color: #fff; 61 | border-radius: 50%; 62 | height: 20px; 63 | width: 20px; 64 | display: block; 65 | } 66 | 67 | .pointer-container { 68 | position: absolute; 69 | top: -40px; 70 | left: 140px; 71 | width: 20px; 72 | height: 190px; 73 | animation: rotate 7.5s linear forwards infinite; 74 | transform-origin: bottom center; 75 | } 76 | 77 | @keyframes rotate { 78 | from { 79 | transform: rotate(0deg); 80 | } 81 | 82 | to { 83 | transform: rotate(360deg); 84 | } 85 | } 86 | 87 | .container.grow { 88 | animation: grow 3s linear forwards; 89 | } 90 | 91 | @keyframes grow { 92 | from { 93 | transform: scale(1); 94 | } 95 | 96 | to { 97 | transform: scale(1.2); 98 | } 99 | } 100 | 101 | .container.shrink { 102 | animation: shrink 3s linear forwards; 103 | } 104 | 105 | @keyframes shrink { 106 | from { 107 | transform: scale(1.2); 108 | } 109 | 110 | to { 111 | transform: scale(1); 112 | } 113 | } -------------------------------------------------------------------------------- /journal/app.js: -------------------------------------------------------------------------------- 1 | //jshint esversion:6 2 | 3 | const express = require("express"); 4 | const bodyParser = require("body-parser"); 5 | const ejs = require("ejs"); 6 | 7 | const homeStartingContent = "Lacus vel facilisis volutpat est velit egestas dui id ornare. Semper auctor neque vitae tempus quam. Sit amet cursus sit amet dictum sit amet justo. Viverra tellus in hac habitasse. Imperdiet proin fermentum leo vel orci porta. Donec ultrices tincidunt arcu non sodales neque sodales ut. Mattis molestie a iaculis at erat pellentesque adipiscing. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Odio euismod lacinia at quis risus sed vulputate odio ut. Cursus mattis molestie a iaculis at erat pellentesque adipiscing."; 8 | const aboutContent = "Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Non diam phasellus vestibulum lorem sed. Platea dictumst quisque sagittis purus sit. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Mauris in aliquam sem fringilla. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim ut tellus elementum sagittis vitae. Mauris ultrices eros in cursus turpis massa tincidunt dui."; 9 | const contactContent = "Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc sed augue lacus. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Pulvinar elementum integer enim neque. Ultrices gravida dictum fusce ut placerat orci nulla. Mauris in aliquam sem fringilla ut morbi tincidunt. Tortor posuere ac ut consequat semper viverra nam libero."; 10 | 11 | const app = express(); 12 | 13 | app.set('view engine', 'ejs'); 14 | 15 | app.use(bodyParser.urlencoded({extended: true})); 16 | app.use(express.static("public")); 17 | 18 | 19 | app.get("/", function(req, res) { 20 | res.render("home", {startingContent: homeStartingContent}); 21 | }); 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | app.listen(3000, function() { 37 | console.log("Server started on port 3000"); 38 | }); 39 | -------------------------------------------------------------------------------- /rockpaperscissors/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 2 | 3 | :root{ 4 | --primary-color: #003699; 5 | --dark-color: #333333; 6 | --light-color: #f4f4f4; 7 | --purple-color: #b300ff; 8 | --pink-color: #ff2be6; 9 | --lose-color: #dc3545; 10 | --win-color: #28a745; 11 | --model-duration: 1s; 12 | } 13 | 14 | *{ 15 | box-sizing: border-box; 16 | padding: 0; 17 | margin: 0; 18 | } 19 | 20 | body{ 21 | font-family: 'Roboto',sans-serif; 22 | line-height: 1.6; 23 | background: #fff; 24 | color: #333; 25 | } 26 | 27 | .M_head{ 28 | color: #ff8f00; 29 | font-size: 3.5rem; 30 | } 31 | 32 | .S_head{ 33 | color: #3fff14; 34 | font-size: 2rem; 35 | } 36 | 37 | .container{ 38 | max-width: 1100px; 39 | margin: auto; 40 | overflow: hidden; 41 | padding: 0 2rem; 42 | text-align: center; 43 | } 44 | 45 | .restart-btn{ 46 | display: none; 47 | background: #65a3ff; 48 | color: #fff; 49 | padding: 0.4rem 1.3rem; 50 | font-size: 1rem; 51 | cursor: pointer; 52 | outline: none; 53 | border: none; 54 | margin-bottom: 1rem; 55 | } 56 | 57 | .restart-btn:hover{ 58 | background: var(--primary-color); 59 | color: #fff; 60 | } 61 | 62 | .header { 63 | text-align: center; 64 | margin: 1rem 0; 65 | } 66 | 67 | .header h1{ 68 | margin-bottom: 1rem; 69 | } 70 | 71 | .score{ 72 | display: grid; 73 | grid-template-columns: repeat(2, 1fr); 74 | font-size: 1.2rem; 75 | color: #fff; 76 | } 77 | 78 | .score p:first-child{ 79 | background: var(--purple-color); 80 | } 81 | 82 | .score p:last-child{ 83 | background: var(--pink-color); 84 | } 85 | 86 | .choices{ 87 | display: grid; 88 | grid-template-columns: repeat(3, 1fr); 89 | grid-gap: 2rem; 90 | margin-top: 3rem; 91 | text-align: center; 92 | } 93 | 94 | .choice{ 95 | cursor: pointer; 96 | } 97 | 98 | .choice:hover{ 99 | color: var(--primary-color); 100 | } 101 | 102 | .text-win{ 103 | color: var(--win-color); 104 | } 105 | 106 | .text-lose{ 107 | color: var(--lose-color); 108 | } 109 | 110 | @media(max-width: 700px){ 111 | .choice{ 112 | font-size: 110px; 113 | } 114 | } 115 | 116 | @media(max-width: 500px){ 117 | .choice{ 118 | font-size: 80px; 119 | } 120 | } 121 | 122 | -------------------------------------------------------------------------------- /FigmaPlugin/ui.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 27 | 28 |
29 |

Social Media Card Plugin

30 |
31 | 32 |
33 | 34 | 41 | 42 | 43 | 50 | 51 | 52 | 61 |
62 | 63 |
64 | 65 | 66 |
67 | 68 |
69 | 76 | 77 | 78 | 85 | 86 | 87 | 94 | 95 |
96 | 97 |
98 | 99 |
100 | 101 | 117 | -------------------------------------------------------------------------------- /json to html table/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FIR CRIME REPORT 7 | 8 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 |

CRIME DATA SHEET

52 |
53 | 54 | 55 |
56 | 57 | 58 | 59 | 60 | 104 | 105 | -------------------------------------------------------------------------------- /colorguessgame/col.js: -------------------------------------------------------------------------------- 1 | var numSquares=6; 2 | var colors= []; 3 | var pickedCol; 4 | var squares = document.querySelectorAll(".square"); 5 | var question= document.getElementById("coldis"); 6 | var h1= document.querySelector("h1"); 7 | var messageDisplay= document.querySelector("#message"); 8 | var resetButton= document.querySelector("#reset"); 9 | var modeButtons = document.getElementsByClassName("mode"); 10 | 11 | init(); 12 | 13 | function init(){ 14 | setUpModeButtons(); 15 | setUpSquares(); 16 | reset(); 17 | } 18 | 19 | function setUpModeButtons(){ 20 | for (var i =0; iYou win 78 | 79 | 80 | 81 |

Computer Chose ${computerChoice.charAt(0).toUpperCase()+computerChoice.slice(1)} 82 |

83 | `; 84 | } 85 | else if(winner === 'computer'){ 86 | //inc p score 87 | scoreboard.computer++; 88 | //show model result 89 | result.innerHTML = ` 90 |

You Lose 91 |

92 | 93 | 94 |

Computer Chose ${computerChoice.charAt(0).toUpperCase()+computerChoice.slice(1)} 95 |

96 | `; 97 | } 98 | else{ 99 | //show model result 100 | result.innerHTML = ` 101 |

It's a draw 102 |

103 | 104 | 105 |

Computer Chose ${computerChoice.charAt(0).toUpperCase()+computerChoice.slice(1)} 106 |

107 | `; 108 | } 109 | //show score 110 | score.innerHTML = ` 111 |

Player: ${scoreboard.player}

112 |

Computer: ${scoreboard.computer}

113 | `; 114 | model.style.display = 'block'; 115 | } 116 | 117 | //Clear model 118 | function clearModel(e) { 119 | // body... 120 | if(e.target == model){ 121 | model.style.display = 'none'; 122 | } 123 | } 124 | 125 | //RestartGame 126 | function restartGame(argument) { 127 | // body... 128 | scoreboard.player = 0; 129 | scoreboard.computer = 0; 130 | score.innerHTML = ` 131 |

Player: 0

132 |

Computer: 0

133 | `; 134 | } 135 | //Event listeners 136 | choices.forEach(choice=>choice.addEventListener('click',play)); 137 | 138 | window.addEventListener('click',clearModel); 139 | 140 | restart.addEventListener('click',restartGame); -------------------------------------------------------------------------------- /pirple_assigns/css/thirdassign/recipecss.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | @media screen and (max-width: 400px) { 4 | .full-body { 5 | background-color: lightcoral; 6 | font-size: small; 7 | } 8 | #img2{ 9 | padding:30px; 10 | text-align: center; 11 | justify-content: center; 12 | margin-left: 40%; 13 | } 14 | } 15 | 16 | @media screen and (max-width: 750px) { 17 | .full-body { 18 | background-color: lightgreen; 19 | font-size: small;} 20 | #img2{ 21 | padding:30px; 22 | text-align: center; 23 | justify-content: center; 24 | margin-left: 40%; 25 | display: none; 26 | } 27 | #second-heading{ 28 | padding-bottom: 20px; 29 | font-size: 30px; 30 | text-decoration: underline; 31 | color: orange; 32 | } 33 | 34 | #third-heading{ 35 | padding-bottom: 20px; 36 | font-size: 30px; 37 | text-align: center; 38 | color: chocolate; 39 | } 40 | 41 | 42 | .navtag{ 43 | font-size: 30px; 44 | color: darkblue; 45 | text-decoration: solid; 46 | padding-right: 20px; 47 | padding-left: 20px; 48 | } 49 | .heading{ 50 | padding-bottom: 20px; 51 | font-weight: bold; 52 | text-decoration: underline; 53 | font-size: 40px; 54 | text-align: center; 55 | color: brown; 56 | margin-top: 40px; 57 | } 58 | 59 | } 60 | @media screen and (min-width: 750px) { 61 | .full-body { 62 | background-color: aqua; 63 | font-size: medium; 64 | } 65 | #second-heading{ 66 | padding-bottom: 20px; 67 | font-size: 50px; 68 | text-decoration: underline; 69 | color: orange; 70 | } 71 | 72 | #third-heading{ 73 | padding-bottom: 20px; 74 | font-size: 50px; 75 | text-align: center; 76 | color: chocolate; 77 | } 78 | 79 | .heading{ 80 | padding-bottom: 20px; 81 | font-weight: bold; 82 | text-decoration: underline; 83 | font-size: 60px; 84 | text-align: center; 85 | color: brown; 86 | } 87 | 88 | #img2{ 89 | padding:30px; 90 | text-align: center; 91 | justify-content: center; 92 | margin-left: 40%; 93 | } 94 | 95 | .navtag{ 96 | font-size: 30px; 97 | color: teal; 98 | text-decoration: solid; 99 | padding-right: 20px; 100 | padding-left: 20px; 101 | } 102 | } 103 | nav{ 104 | height: 5px; 105 | width: 100%; 106 | padding-bottom: 10px; 107 | } 108 | nav ul{ 109 | list-style: none; 110 | display: flex; 111 | padding-left: 0%; 112 | justify-content: space-around; 113 | flex-flow: wrap; 114 | } 115 | 116 | #paragraph{ 117 | font-size: 30px; 118 | text-align: center; 119 | } 120 | 121 | #unordered{ 122 | font-size: 20px; 123 | margin-left: 60px; 124 | list-style-image: url(https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/microsoft/209/cupcake_1f9c1.png); 125 | font-size: 50px; 126 | } 127 | 128 | #ordered1{ 129 | font-size: 30px; 130 | margin-left: 30px; 131 | } 132 | 133 | #ordered2{ 134 | font-size: 30px; 135 | margin-left: 30px; 136 | } 137 | 138 | .spanclass{ 139 | font-style: italic; 140 | } 141 | #lastspan{ 142 | text-decoration: underline; 143 | } 144 | #firstspan{ 145 | color:red; 146 | font-style: normal; 147 | 148 | } 149 | 150 | #recipe1{ 151 | color: lightcoral; 152 | } 153 | #recipe3{ 154 | color: lightcoral; 155 | } 156 | 157 | #recipe5{ 158 | color: lightcoral; 159 | } 160 | 161 | #fourth-heading{ 162 | font-size: 40px; 163 | text-decoration: underline; 164 | color: brown; 165 | } 166 | 167 | .navtag:hover{ 168 | color: blue; 169 | } 170 | #img1{ 171 | padding:30px; 172 | text-align: center; 173 | justify-content: center; 174 | margin-left: 40%; 175 | } 176 | #img1:hover{ 177 | transform: scale(1.5); 178 | ; 179 | } 180 | 181 | #img2:hover{ 182 | transform: scale(1.5); 183 | ; 184 | } 185 | 186 | /* https://www.w3schools.com/cssref/ */ -------------------------------------------------------------------------------- /Calculator Flexbox/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | color: white; 6 | background-color: lavenderblush; 7 | } 8 | 9 | .calculator { 10 | height: 600px; 11 | width: 22.5%; 12 | background-color: #333333; 13 | display:grid; 14 | place-items: center; 15 | } 16 | 17 | .screen { 18 | background-color: black; 19 | height: 70px; 20 | width: 90%; 21 | margin-top: 40px; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | font-size: 45px; 26 | } 27 | 28 | .buttons { 29 | display:grid; 30 | width:90%; 31 | height:400px; 32 | color: white; 33 | margin-bottom: 30px; 34 | grid-template-columns: 1fr 1fr 1fr 1fr; 35 | grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 36 | grid-gap:3px; 37 | grid-template-areas: 38 | "clear plusminus divide multiply" 39 | "seven eight nine minus" 40 | "four five six plus" 41 | "one two three equal" 42 | "zero zero dot equal"; 43 | } 44 | 45 | #clear 46 | { 47 | grid-area:clear; 48 | font-size: 50px; 49 | border-radius: 10px; 50 | background: linear-gradient(#BF000C, #680008); 51 | font-size: 50px; 52 | color: white; 53 | cursor: pointer; 54 | } 55 | 56 | #plusminus{ 57 | grid-area:plusminus; 58 | color: white; 59 | background: linear-gradient(#8D8B8C, #403C3D); 60 | font-size: 35px; 61 | border-radius: 10px; 62 | cursor: pointer; 63 | } 64 | 65 | #divide 66 | { 67 | grid-area:divide; 68 | color: white; 69 | font-size: 50px; 70 | border-radius: 10px; 71 | background: linear-gradient(#8D8B8C, #403C3D); 72 | cursor: pointer; 73 | } 74 | 75 | #multiply 76 | { 77 | grid-area:multiply; 78 | color: white; 79 | background: linear-gradient(#8D8B8C, #403C3D); 80 | font-size: 40px; 81 | border-radius: 10px; 82 | cursor: pointer; 83 | } 84 | #plus{ 85 | grid-area:plus; 86 | color: white; 87 | background: linear-gradient(#8D8B8C, #403C3D); 88 | font-size: 50px; 89 | border-radius: 10px; 90 | cursor: pointer; 91 | } 92 | #minus{ 93 | grid-area:minus; 94 | color: white; 95 | background: linear-gradient(#8D8B8C, #403C3D); 96 | font-size: 50px; 97 | border-radius: 10px; 98 | cursor: pointer; 99 | } 100 | #seven 101 | { 102 | grid-area:seven; 103 | color: white; 104 | background: linear-gradient(#2F2F2F, #030303); 105 | font-size: 50px; 106 | border-radius: 10px; 107 | cursor: pointer; 108 | } 109 | #eight 110 | { 111 | grid-area:eight; 112 | color: white; 113 | background: linear-gradient(#2F2F2F, #030303); 114 | font-size: 50px; 115 | border-radius: 10px; 116 | cursor: pointer; 117 | } 118 | #nine 119 | { 120 | grid-area:nine; 121 | color: white; 122 | background: linear-gradient(#2F2F2F, #030303); 123 | font-size: 50px; 124 | border-radius: 10px; 125 | cursor: pointer; 126 | } 127 | #four 128 | { 129 | grid-area:four; 130 | color: white; 131 | background: linear-gradient(#2F2F2F, #030303); 132 | font-size: 50px; 133 | border-radius: 10px; 134 | cursor: pointer; 135 | } 136 | #five 137 | { 138 | grid-area:five; 139 | color: white; 140 | background: linear-gradient(#2F2F2F, #030303); 141 | font-size: 50px; 142 | border-radius: 10px; 143 | cursor: pointer; 144 | } 145 | #six{ 146 | grid-area:six; 147 | color: white; 148 | background: linear-gradient(#2F2F2F, #030303); 149 | font-size: 50px; 150 | border-radius: 10px; 151 | cursor: pointer; 152 | } 153 | #three 154 | { 155 | grid-area:three; 156 | color: white; 157 | background: linear-gradient(#2F2F2F, #030303); 158 | font-size: 50px; 159 | border-radius: 10px; 160 | cursor: pointer; 161 | } 162 | #two 163 | { 164 | grid-area:two; 165 | color: white; 166 | background: linear-gradient(#2F2F2F, #030303); 167 | font-size: 50px; 168 | border-radius: 10px; 169 | cursor: pointer; 170 | } 171 | #one 172 | { 173 | grid-area:one; 174 | color: white; 175 | background: linear-gradient(#2F2F2F, #030303); 176 | font-size: 50px; 177 | border-radius: 10px; 178 | cursor: pointer; 179 | } 180 | #dot 181 | { 182 | grid-area:dot; 183 | color: white; 184 | background: linear-gradient(#2F2F2F, #030303); 185 | font-size: 50px; 186 | border-radius: 10px; 187 | cursor: pointer; 188 | } 189 | #zero{ 190 | grid-area:zero; 191 | color: white; 192 | background: linear-gradient(#2F2F2F, #030303); 193 | font-size: 50px; 194 | border-radius: 10px; 195 | cursor: pointer; 196 | } 197 | #equal{ 198 | grid-area:equal; 199 | color: white; 200 | background: linear-gradient(#8D8B8C, #403C3D); 201 | font-size: 50px; 202 | border-radius: 10px; 203 | cursor: pointer; 204 | } -------------------------------------------------------------------------------- /solarsystem-master/solar.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | 4 | 5 | margin:auto; 6 | background-position: cover; 7 | background-attachment: fixed; 8 | background-repeat: no-repeat; 9 | background-color: blueviolet; 10 | 11 | } 12 | 13 | #solarsystem 14 | 15 | { 16 | position: relative; 17 | margin: auto; 18 | width: 680px; 19 | height: 600px; 20 | overflow: hidden; 21 | padding: 50px; 22 | 23 | 24 | } 25 | 26 | #neptune 27 | { 28 | 29 | position: absolute; 30 | width: 600px; 31 | height: 600px; 32 | background-color: rgba(0,0,0,0); 33 | border: 2px dotted #222; 34 | border-radius: 100%; 35 | animation: solar 70s linear infinite; 36 | 37 | } 38 | 39 | 40 | #neptune:after 41 | { 42 | position: absolute; 43 | width: 25px; 44 | height: 22px; 45 | border-color: #00009d; 46 | border-radius: 100%; 47 | background: #00f; 48 | border-style: solid; 49 | border-width: 4px 1px 1px 1px; 50 | content: " "; 51 | left: 300px; 52 | top: -13px; 53 | } 54 | 55 | #uranus 56 | { 57 | 58 | position: absolute; 59 | width: 530px; 60 | height: 530px; 61 | background-color: rgba(0,0,0,0); 62 | border: 2px dotted #222; 63 | border-radius: 100%; 64 | animation: solar 70s linear infinite; 65 | 66 | } 67 | 68 | 69 | #uranus:after 70 | { 71 | position: absolute; 72 | width: 22px; 73 | height: 20px; 74 | border-color: #00539d; 75 | border-radius: 100%; 76 | background: #00f; 77 | border-style: solid; 78 | border-width: 4px 1px 1px 1px; 79 | content: " "; 80 | left: 265px; 81 | top: -10px; 82 | } 83 | 84 | #saturn 85 | { 86 | 87 | position: absolute; 88 | width: 460px; 89 | height: 460px; 90 | background-color: rgba(0,0,0,0); 91 | border: 2px dotted #222; 92 | border-radius: 100%; 93 | left: 120px; 94 | top: 120px; 95 | animation: solar 70s linear infinite; 96 | 97 | } 98 | 99 | 100 | #saturn:before 101 | { 102 | position: absolute; 103 | width: 20px; 104 | height: 18px; 105 | border-color: #83883d; 106 | border-radius: 100%; 107 | background: #0c0c0c; 108 | border-style: solid; 109 | border-width: 5px 1px 1px 1px; 110 | content: " "; 111 | left: 224px; 112 | top: -15px; 113 | } 114 | 115 | #saturn:after 116 | { 117 | position: absolute; 118 | width: 35px; 119 | height: 10px; 120 | border-radius: 100%; 121 | background: #838383; 122 | background: rgba(0, 0, 0, 0); 123 | border-style: solid; 124 | border-width: 1px 1px 3px 2px; 125 | content: " "; 126 | left: 218px; 127 | top: -10px; 128 | } 129 | 130 | #jupiter 131 | { 132 | 133 | position: absolute; 134 | width: 360px; 135 | height: 360px; 136 | background-color: rgba(0,0,0,0); 137 | border: 2px dotted #222; 138 | border-radius: 100%; 139 | left: 170px; 140 | top: 170px; 141 | animation: solar 70s linear infinite; 142 | 143 | } 144 | 145 | #jupiter:after 146 | { 147 | position: absolute; 148 | width: 20px; 149 | height: 16px; 150 | border-radius: 100%; 151 | background: #f60; 152 | border-color: #630; 153 | border-style: solid; 154 | border-width: 6px 1px 1px 1px; 155 | content: " "; 156 | left: 170px; 157 | top: -10px; 158 | } 159 | 160 | #mars 161 | { 162 | 163 | position: absolute; 164 | width: 300px; 165 | height: 300px; 166 | background-color: rgba(0,0,0,0); 167 | border: 2px dotted #222; 168 | border-radius: 100%; 169 | left: 200px; 170 | top: 200px; 171 | animation: solar 70s linear infinite; 172 | 173 | } 174 | 175 | #mars:after 176 | { 177 | position: absolute; 178 | width: 18px; 179 | height: 16px; 180 | border-radius: 100%; 181 | background: #b00000; 182 | border-color: #600; 183 | border-style: solid; 184 | border-width: 3px 1px 1px 1px; 185 | content: " "; 186 | left: 100px; 187 | top: -5px; 188 | } 189 | 190 | #earth 191 | { 192 | 193 | position: absolute; 194 | width: 250px; 195 | height: 250px; 196 | background-color: rgba(0,0,0,0); 197 | border: 2px dotted #222; 198 | border-radius: 100%; 199 | left: 225px; 200 | top: 225px; 201 | animation: solar 70s linear infinite; 202 | 203 | } 204 | 205 | #earth:after 206 | { 207 | position: absolute; 208 | width: 18px; 209 | height: 16px; 210 | border-radius: 100%; 211 | background: #0058b0; 212 | border-color: #00366c; 213 | border-style: solid; 214 | border-width: 3px 1px 1px 1px; 215 | content: " "; 216 | left: 75px; 217 | top: -5px; 218 | } 219 | 220 | #venus 221 | { 222 | 223 | position: absolute; 224 | width: 200px; 225 | height: 200px; 226 | background-color: rgba(0,0,0,0); 227 | border: 2px dotted #222; 228 | border-radius: 100%; 229 | left: 250px; 230 | top: 250px; 231 | animation: solar 70s linear infinite; 232 | 233 | } 234 | 235 | #venus:after 236 | { 237 | position: absolute; 238 | width: 16px; 239 | height: 14px; 240 | border-radius: 100%; 241 | background: #ffd3a8; 242 | border-color: #ffa579; 243 | border-style: solid; 244 | border-width: 4px 1px 1px 1px; 245 | content: " "; 246 | left: 50px; 247 | top: -1px; 248 | } 249 | 250 | #mercury 251 | { 252 | 253 | position: absolute; 254 | width: 150px; 255 | height: 150px; 256 | background-color: rgba(0,0,0,0); 257 | border: 2px dotted #222; 258 | border-radius: 100%; 259 | left: 275px; 260 | top: 275px; 261 | animation: solar 70s ease-out infinite; 262 | 263 | } 264 | 265 | #mercury:after 266 | { 267 | position: absolute; 268 | width: 15px; 269 | height: 14px; 270 | border-radius: 100%; 271 | background: #713800; 272 | border-color: #623100; 273 | border-style: solid; 274 | border-width: 2px 1px 1px 1px; 275 | content: " "; 276 | left: 35px; 277 | top: -3px; 278 | } 279 | 280 | #sun 281 | { 282 | 283 | position: absolute; 284 | width: 70px; 285 | height: 70px; 286 | background-color: #f90; 287 | border-radius: 100%; 288 | left: 317px; 289 | top: 317px; 290 | } 291 | 292 | @keyframes solar 293 | { 294 | from{transform: rotate(0deg);} 295 | to{transform: rotate(360deg);} 296 | } 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | -------------------------------------------------------------------------------- /mailchimp/signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Newsletter signup 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 46 | 47 | 48 | 49 | 50 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /Task/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Stride Website 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 17 | 19 | 20 |

Stride

21 |
22 | 23 |
24 | About 25 | Image 26 |
27 |
28 | 29 | 30 | 31 |
32 |

33 | Sell more useless
34 | stuff faster! 35 |

36 |

37 | To be honest, this is just a stupid placeholder text. We don´t know 38 | how to sell
39 | anything, not even lesser or slower as you. 40 |

41 | 42 | 43 |
44 |
45 | 46 |
47 |

48 | Okay, there are three really good reasons for us.
49 | There are no more than three, but we think three is
50 | a reasonable good number of good stuff. 51 |

52 | 53 |
54 |
55 |

01.

56 |
57 |

58 | We rented this fancy startup office in an old factory building. 59 |

60 |

61 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus 62 | culpa, voluptatibus ex itaque, sapiente a consequatur inventore 63 | beatae, ipsam debitis omnis consequuntur iste asperiores. 64 | Similique quisquam debitis corrupti deserunt, dolor. 65 |

66 |
67 |
68 | 69 |
70 |

02.

71 |
72 |

73 | We don´t know exactly what we are doing. But thats good because we 74 | can´t break something intentionally. 75 |

76 |

77 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus 78 | culpa, voluptatibus ex itaque, sapiente a consequatur inventore 79 | beatae, ipsam debitis omnis consequuntur iste asperiores. 80 | Similique quisquam debitis corrupti deserunt, dolor. 81 |

82 |
83 |
84 | 85 |
86 |

03.

87 | 88 |
89 |

90 | There is no real number three reason. So please read again number 91 | one and two. 92 |

93 |

94 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus 95 | culpa, voluptatibus ex itaque, sapiente a consequatur inventore 96 | beatae, ipsam debitis omnis consequuntur iste asperiores. 97 | Similique quisquam debitis corrupti deserunt, dolor. 98 |

99 |
100 |
101 |
102 |
103 | 104 |
105 |
106 |
107 | 108 |
109 | 110 | 111 |
112 | 113 |
114 |

115 | We did some interesting stuff in
116 | our field of work. For example we
117 | collect a lot of these free photos
118 | and use them on our website. 119 |

120 |

121 | Donec id elit non mi porta gravida
122 | at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor 123 | mauris condimentum nibh,
124 | ut fermentum massa justo sit amet risus. 125 |

126 |
127 |
128 |
129 | 130 |
131 |
132 |

Our magic numbers

133 |
134 | 135 |
136 |

137 | There are some important numbers for us. They are just numbers without 138 | any meaning, but we just love them. 139 |

140 | 141 |
142 |
143 |

42%

144 |

145 | Donec id elit non mi porta gravida at eget metus. Fusce dapibus, 146 | tellus ac cursus commodo, tortor mauris condimentum nibh, ut 147 | fermentum massa justo sit amet risus. Etiam porta sem malesuada 148 | magna mollis euismod. Donec sed odio dui. 149 |

150 |
151 | 152 |
153 |

+300

154 |

155 | Donec id elit non mi porta gravida at eget metus. Fusce dapibus, 156 | tellus ac cursus commodo, tortor mauris condimentum nibh, ut 157 | fermentum massa justo sit amet risus. Etiam porta sem malesuada 158 | magna mollis euismod. Donec sed odio dui. 159 |

160 |
161 |
162 |
163 |
164 | 165 |
166 |
167 | 168 | 169 | 170 | 171 |
172 |
173 | 174 |
175 |
176 |

What our clients say

177 |
178 | 179 |
180 |

181 | “I´am the CEO of this company. So maybe you think "he will tell us 182 | something super awesome about it only". But no. Its a really strange 183 | place to work with creepy people all around. They do some computer 184 | stuff I don´t understand. But I wear expensive Glasses and a Patagonia 185 | Hoodie. So I´am fine with it.” 186 |

187 |
188 |
189 | 190 | 206 | 207 | 208 | -------------------------------------------------------------------------------- /pirple_assigns/html/recipe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Recipe 7 | 8 | 9 |

Muffin Cake

10 |

11 | This Muffin cake is literally a 2-ingridient recipe and is so easy to make that even a 6 year old can make it. 12 |
13 | It is really tasty at the same time. Its the perfect recipe for choco-lovers who are beginners in baking. 14 |

15 |

Ingredients

16 |
    17 |
  • 2 eggs
    • 18 |
  • Nutella
    • 19 |
20 |

Steps

21 |
    22 |
  1. Put 3 scoops of nutella in a bowl🍫
    2. 23 |
  2. Separate the egg yolk from the egg white🥚.
    3. 24 |
  3. Put the yolk in the nutella and mix well.
    4. 25 |
  4. Beat the egg whites till it becomes cream-like.🍦
    5. 26 |
  5. Add the cream into the nutella mixture and mix well.🥣
    6. 27 |
  6. Put the mixture into a mould and put it into the oven.
    7. 28 |
  7. Take it out after 15 mins.🧁
    8. 29 |
30 |

Muffin Cake is Ready.

31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /pirple_assigns/html/recipefinal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Recipe 7 | 8 | 9 |

Muffin Cake

10 |

11 | This Muffin cake is literally a 2-ingridient recipe and is so easy to make that even a 6 year old can make it. 12 |
13 | It is really tasty at the same time. Its the perfect recipe for choco-lovers who are beginners in baking. 14 |

15 |

Ingredients

16 |
    17 |
  • 2 eggs
    • 18 |
  • Nutella
    • 19 |
20 |

Steps

21 |
    22 |
  1. Put 3 scoops of nutella in a bowl🍫
    2. 23 |
  2. Separate the egg yolk from the egg white🥚.
    3. 24 |
  3. Put the yolk in the nutella and mix well.
    4. 25 |
  4. Beat the egg whites till it becomes cream-like.🍦
    5. 26 |
  5. Add the cream into the nutella mixture and mix well.🥣
    6. 27 |
  6. Put the mixture into a mould and put it into the oven.
    7. 28 |
  7. Take it out after 15 mins.🧁
    8. 29 |
30 |

Muffin Cake is Ready.

31 | 32 | 33 |

Alternative Recipes

34 |
    35 |
  1. Recipe 1
    2. 36 |
  2. Recipe 2
    3. 37 |
  3. Recipe 3
    4. 38 |
  4. Recipe 4
    5. 39 |
  5. Recipe 5
    6. 40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /pirple_assigns/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Recipe 7 | 9 | 10 |

Muffin Cake

11 |

12 | This Muffin cake is literally a 2-ingridient recipe and is so easy to make that even a 6 year old can make it. 13 |
14 | It is really tasty at the same time. Its the perfect recipe for choco-lovers who are beginners in baking. 15 |

16 |

Ingredients

17 |
    18 |
  • 2 eggs
    • 19 |
  • Nutella
    • 20 |
21 |

Steps

22 |
    23 |
  1. Put 3 scoops of nutella in a bowl🍫
    2. 24 |
  2. Separate the egg yolk from the egg white🥚.
    3. 25 |
  3. Put the yolk in the nutella and mix well.
    4. 26 |
  4. Beat the egg whites till it becomes cream-like.🍦
    5. 27 |
  5. Add the cream into the nutella mixture and mix well.🥣
    6. 28 |
  6. Put the mixture into a mould and put it into the oven.
    7. 29 |
  7. Take it out after 15 mins.🧁
    8. 30 |
31 |

Muffin Cake is Ready.

32 | 33 | 34 |

Alternative Recipes

35 |
    36 |
  1. Recipe 1
    2. 37 |
  2. Recipe 2
    3. 38 |
  3. Recipe 3
    4. 39 |
  4. Recipe 4
    5. 40 |
  5. Recipe 5
    6. 41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Storybook/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FAVOURITE BOOK 8 | 9 | 10 |

My Favourite Book

11 |
12 |
13 |

The Alchemist

14 |

By Paulo Coeleho

15 |
16 |

"If you truly have a desire for something and want to conquer it, 17 |
18 | the whole universe comes together and helps you to achieve it." 19 |

20 | 21 |
22 | 23 |

Brief

24 | 25 |
26 |

27 | This book is about a young boy who seemingly had a tough life growing up in spain. 28 | He sets off to seek his destiny to Egypt to obtain treasure. 29 |
30 | He sells some of his sheep. Mid-way in his journey he stumbles upon a king who gives him 2 precious stones. 31 |
32 | This story is all about omens and destinies. He after a while realizes he needs more money to go to egypt so he serves as an assistant 33 | to a crystal merchant. 34 |
35 | After a year or so, he gains enough money and sets off. 36 | He makes friends with an englishman and soon their caravan reaches an oasis. 37 |
38 | There he meets the love of his life,Fathima 39 |
40 | Then by some luck he meets an alchemist who soon accompanies him in th rest of the journey. 41 |
42 | Finally the boy reaches the pyramids but he gets beaten up there and in the end he goes away with a gold-plate, 43 |
44 | Fathima,and a whole lot of knowledge he had acquired throughoyt the journey. 45 |

46 |
47 |
48 |
49 | 50 | 51 |
52 |
53 |
54 | Mail me here 55 | 56 | 57 | --------------------------------------------------------------------------------