From c04a1aa464de47da556713955d985ca022878349 Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Tue, 29 Mar 2022 01:06:42 +0530 Subject: [PATCH 01/32] Create courses.json --- scripts/courses.json | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 scripts/courses.json diff --git a/scripts/courses.json b/scripts/courses.json new file mode 100644 index 0000000..e69de29 From 9af72a263d753fb6c1a8c7519551f76e00cdb460 Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Tue, 29 Mar 2022 03:13:21 +0530 Subject: [PATCH 02/32] basic structure --- courses.html | 983 ++++++++++++++++++++++++++++++++++ index.html | 10 + scripts/courses.js | 35 ++ scripts/courses.json | 0 scripts/coursesData.js | 1140 ++++++++++++++++++++++++++++++++++++++++ styles/courses.css | 54 ++ 6 files changed, 2222 insertions(+) create mode 100644 courses.html create mode 100644 scripts/courses.js delete mode 100644 scripts/courses.json create mode 100644 scripts/coursesData.js create mode 100644 styles/courses.css diff --git a/courses.html b/courses.html new file mode 100644 index 0000000..c2e3de9 --- /dev/null +++ b/courses.html @@ -0,0 +1,983 @@ + + + + + + + Document + + + +
+ + + diff --git a/index.html b/index.html index e69de29..ee86e94 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,10 @@ + + + + + + + Document + + + diff --git a/scripts/courses.js b/scripts/courses.js new file mode 100644 index 0000000..3b0b826 --- /dev/null +++ b/scripts/courses.js @@ -0,0 +1,35 @@ + + +const append = (data, parent)=>{ + + parent.innerHTML = null; + + data.forEach((el) => { + // console.log('el:', el) + + let innerDiv = document.createElement('div'); + + let title = document.createElement('h1'); + title.innerText = el.title; + + let btn1 = document.createElement('button'); + btn1.innerText = "Watch Free Preview"; + btn1.id = "btn1"; + + + let btn2 = document.createElement('button'); + btn2.innerText = "Get Full Access"; + btn2.id = "btn2"; + + + + + + innerDiv.append(title,btn1,btn2); + + parent.append(innerDiv); + + }) +} + +export default append; \ No newline at end of file diff --git a/scripts/courses.json b/scripts/courses.json deleted file mode 100644 index e69de29..0000000 diff --git a/scripts/coursesData.js b/scripts/coursesData.js new file mode 100644 index 0000000..0430100 --- /dev/null +++ b/scripts/coursesData.js @@ -0,0 +1,1140 @@ +let coursesData=[ { + "title": "Angular 9 Fundamentals", + "href": "\/courses\/angular-9\/", + "instructorName": "Lukas Ruebbelke", + "instructorSlug": "lukas-ruebbelke", + "date": "Jun 29, 2020", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "State Machines in JavaScript with XState", + "href": "\/courses\/xstate\/", + "instructorName": "David Khourshid", + "instructorSlug": "david-khourshid", + "date": "Jun 15, 2020", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Intermediate Gatsby with Gatsby Themes", + "href": "\/courses\/intermediate-gatsby\/", + "instructorName": "Jason Lengstorf", + "instructorSlug": "jason-lengstorf", + "date": "Dec 17, 2019", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Introduction to Gatsby", + "href": "\/courses\/gatsby\/", + "instructorName": "Jason Lengstorf", + "instructorSlug": "jason-lengstorf", + "date": "Jun 13, 2019", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Intermediate React, v2", + "href": "\/courses\/intermediate-react-v2\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Jun 11, 2019", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Complete Intro to React, v5", + "href": "\/courses\/complete-react-v5\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Jun 4, 2019", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "TypeScript 3 Fundamentals, v2", + "href": "\/courses\/typescript-v2\/", + "instructorName": "Mike North", + "instructorSlug": "mike-north", + "date": "Mar 26, 2019", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Introduction to GraphQL", + "href": "\/courses\/graphql\/", + "instructorName": "Scott Moss", + "instructorSlug": "scott-moss", + "date": "Jan 22, 2019", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Angular Core", + "href": "\/courses\/angular-core\/", + "instructorName": "Lukas Ruebbelke", + "instructorSlug": "lukas-ruebbelke", + "date": "Dec 21, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Introduction to Node.js", + "href": "\/courses\/node-js\/", + "instructorName": "Scott Moss", + "instructorSlug": "scott-moss", + "date": "Nov 28, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "AWS for Front-End Engineers (ft. S3, Cloudfront \u0026 Route 53)", + "href": "\/courses\/aws-frontend-react\/", + "instructorName": "Steve Kinney", + "instructorSlug": "steve-kinney", + "date": "Oct 16, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Intermediate React", + "href": "\/courses\/intermediate-react\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Sep 14, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Complete Intro to React v4", + "href": "\/courses\/complete-react-v4\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Sep 13, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Mastering Chrome Developer Tools v2", + "href": "\/courses\/chrome-dev-tools-v2\/", + "instructorName": "Jon Kuperman", + "instructorSlug": "jon-kuperman", + "date": "Sep 12, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Rapid Development on AWS: React, Node.js \u0026 GraphQL", + "href": "\/courses\/aws-react-node-graphql\/", + "instructorName": "Steve Kinney", + "instructorSlug": "steve-kinney", + "date": "Jul 16, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Advanced GraphQL", + "href": "\/courses\/advanced-graphql\/", + "instructorName": "Scott Moss", + "instructorSlug": "scott-moss", + "date": "May 23, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Testing React Applications, v2", + "href": "\/courses\/testing-react\/", + "instructorName": "Kent C. Dodds", + "instructorSlug": "kentcdodds", + "date": "May 13, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Advanced React Patterns", + "href": "\/courses\/advanced-react-patterns\/", + "instructorName": "Kent C. Dodds", + "instructorSlug": "kentcdodds", + "date": "May 2, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "SQL Fundamentals", + "href": "\/courses\/sql-fundamentals\/", + "instructorName": "Mike North", + "instructorSlug": "mike-north", + "date": "Apr 9, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Four Semesters of Computer Science in 5 Hours, Part 2", + "href": "\/courses\/computer-science-2\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Apr 2, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Full Stack for Front-Ends Part 2", + "href": "\/courses\/full-stack-v2\/", + "instructorName": "Jem Young", + "instructorSlug": "jem-young", + "date": "Feb 14, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "REST \u0026 GraphQL API Design in Node.js, v2 (using Express \u0026 MongoDB)", + "href": "\/courses\/api-node-rest-graphql\/", + "instructorName": "Scott Moss", + "instructorSlug": "scott-moss", + "date": "Feb 13, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Building Awesomer Apps with Angular", + "href": "\/courses\/building-apps-angular\/", + "instructorName": "Lukas Ruebbelke", + "instructorSlug": "lukas-ruebbelke", + "date": "Feb 7, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "TypeScript Fundamentals", + "href": "\/courses\/typescript\/", + "instructorName": "Mike North", + "instructorSlug": "mike-north", + "date": "Feb 6, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "CSS Grids and Flexbox for Responsive Web Design", + "href": "\/courses\/css-grids-flexbox\/", + "instructorName": "Jen Kramer", + "instructorSlug": "jen-kramer", + "date": "Jan 30, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "JavaScript: The Hard Parts", + "href": "\/courses\/javascript-hard-parts\/", + "instructorName": "Will Sentance", + "instructorSlug": "will-sentance", + "date": "Jan 22, 2018", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Advanced State Management in React (feat. Redux and MobX)", + "href": "\/courses\/react-state\/", + "instructorName": "Steve Kinney", + "instructorSlug": "steve-kinney", + "date": "Dec 4, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Progressive Web Applications and Offline", + "href": "\/courses\/progressive-web-apps\/", + "instructorName": "Mike North", + "instructorSlug": "mike-north", + "date": "Nov 9, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Introduction to Vue.js", + "href": "\/courses\/vue\/", + "instructorName": "Sarah Drasner", + "instructorSlug": "sarah-drasner", + "date": "Sep 14, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Functional-Light JavaScript, v2", + "href": "\/courses\/functional-javascript-v2\/", + "instructorName": "Kyle Simpson", + "instructorSlug": "kyle-simpson", + "date": "Aug 14, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Deep JavaScript Foundations", + "href": "\/courses\/javascript-foundations\/", + "instructorName": "Kyle Simpson", + "instructorSlug": "kyle-simpson", + "date": "Jul 18, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Complete Intro to React, v3 (feat. Redux, Router \u0026 Flow)", + "href": "\/courses\/react\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Jun 26, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Testing JavaScript Applications (feat. React and Redux)", + "href": "\/courses\/testing-javascript\/", + "instructorName": "Kent C. Dodds", + "instructorSlug": "kentcdodds", + "date": "Jun 20, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Introduction to Data Visualization with d3.js v4", + "href": "\/courses\/d3-v4\/", + "instructorName": "Shirley Wu", + "instructorSlug": "shirley-wu", + "date": "May 18, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Firebase \u002b React: Real-time, Serverless Web Apps", + "href": "\/courses\/firebase-react\/", + "instructorName": "Steve Kinney", + "instructorSlug": "steve-kinney", + "date": "Mar 31, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Data Structures and Algorithms in JavaScript", + "href": "\/courses\/data-structures-algorithms\/", + "instructorName": "Bianca Gandolfo", + "instructorSlug": "bianca-gandolfo", + "date": "Mar 29, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Advanced Ember 2.x", + "href": "\/courses\/advanced-ember-2\/", + "instructorName": "Mike North", + "instructorSlug": "mike-north", + "date": "Mar 29, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Full Stack for Front End Engineers", + "href": "\/courses\/full-stack\/", + "instructorName": "Jem Young", + "instructorSlug": "jem-young", + "date": "Mar 28, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Build Cross-Platform Desktop Apps with Electron", + "href": "\/courses\/electron\/", + "instructorName": "Steve Kinney", + "instructorSlug": "steve-kinney", + "date": "Mar 27, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Reactive Angular 2", + "href": "\/courses\/reactive-angular\/", + "instructorName": "Lukas Ruebbelke", + "instructorSlug": "lukas-ruebbelke", + "date": "Mar 20, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Building Awesome Web Apps with Angular 2", + "href": "\/courses\/web-apps-angular-2\/", + "instructorName": "Lukas Ruebbelke", + "instructorSlug": "lukas-ruebbelke", + "date": "Mar 15, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Complete Intro to React, v2 (feat. Router v4 and Redux)", + "href": "\/courses\/complete-intro-react\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Mar 6, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Website Accessibility", + "href": "\/courses\/web-accessibility\/", + "instructorName": "Jon Kuperman", + "instructorSlug": "jon-kuperman", + "date": "Feb 13, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Elm", + "href": "\/courses\/elm\/", + "instructorName": "Richard Feldman", + "instructorSlug": "richard-feldman", + "date": "Feb 5, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "ES6: The Right Parts", + "href": "\/courses\/es6-right-parts\/", + "instructorName": "Kyle Simpson", + "instructorSlug": "kyle-simpson", + "date": "Jan 10, 2017", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Zero to Production Node.js on Amazon Web Services", + "href": "\/courses\/production-node-aws\/", + "instructorName": "Kevin Whinnery", + "instructorSlug": "kevin-whinnery", + "date": "Dec 28, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Webpack 2 Deep Dive", + "href": "\/courses\/webpack\/", + "instructorName": "Kent C. Dodds", + "instructorSlug": "kentcdodds", + "date": "Nov 10, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "React Native (feat. Redux)", + "href": "\/courses\/react-native\/", + "instructorName": "Scott Moss", + "instructorSlug": "scott-moss", + "date": "Oct 27, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Mastering Chrome Developer Tools", + "href": "\/courses\/chrome-dev-tools\/", + "instructorName": "Jon Kuperman", + "instructorSlug": "jon-kuperman", + "date": "Oct 6, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Complete Introduction to React (feat. Redux and React Router)", + "href": "\/courses\/react-intro\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Aug 9, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Four Semesters of Computer Science in 5 Hours", + "href": "\/courses\/computer-science\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Jul 12, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Reactive Angular 2 with ngrx", + "href": "\/courses\/reactive-angular-2\/", + "instructorName": "Lukas Ruebbelke", + "instructorSlug": "lukas-ruebbelke", + "date": "Jun 1, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Build Web Apps with Angular 2", + "href": "\/courses\/angular-2\/", + "instructorName": "Lukas Ruebbelke", + "instructorSlug": "lukas-ruebbelke", + "date": "May 4, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Functional-Lite JavaScript", + "href": "\/courses\/functional-js-lite\/", + "instructorName": "Kyle Simpson", + "instructorSlug": "kyle-simpson", + "date": "Mar 8, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Advanced SVG Animation", + "href": "\/courses\/svg-animation\/", + "instructorName": "Sarah Drasner", + "instructorSlug": "sarah-drasner", + "date": "Feb 19, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Ember 2.x", + "href": "\/courses\/ember-2\/", + "instructorName": "Mike North", + "instructorSlug": "mike-north", + "date": "Jan 26, 2016", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "API Design in Node.js (using Express \u0026 Mongo)", + "href": "\/courses\/api-design-nodejs\/", + "instructorName": "Scott Moss", + "instructorSlug": "scott-moss", + "date": "Dec 30, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Component-Based Architecture in AngularJS 1.x and ES6", + "href": "\/courses\/angular-components-es6\/", + "instructorName": "Scott Moss", + "instructorSlug": "scott-moss", + "date": "Dec 30, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Building Web Apps (with React, Ampersand, ES6 and Webpack)", + "href": "\/courses\/modern-web-apps\/", + "instructorName": "Henrik Joreteg", + "instructorSlug": "henrik-joreteg", + "date": "Dec 1, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Meteor", + "href": "\/courses\/meteor\/", + "instructorName": "Chris Mather", + "instructorSlug": "chris-mather", + "date": "Nov 10, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Unit Testing JavaScript (with CoffeeScript)", + "href": "\/courses\/unit-testing-javascript\/", + "instructorName": "Justin Searls", + "instructorSlug": "justin-searls", + "date": "Oct 16, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Coercion in JavaScript", + "href": "\/courses\/javascript-coercion\/", + "instructorName": "Kyle Simpson", + "instructorSlug": "kyle-simpson", + "date": "Aug 19, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Introduction to JavaScript Programming", + "href": "\/courses\/javascript-basics\/", + "instructorName": "Kyle Simpson", + "instructorSlug": "kyle-simpson", + "date": "Aug 19, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "UI Prototyping with Framer.js", + "href": "\/courses\/ui-prototyping-framer\/", + "instructorName": "Jay Stakelon", + "instructorSlug": "jay-stakelon", + "date": "Jul 8, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "AngularJS 1.x Application Development", + "href": "\/courses\/angular-app-dev\/", + "instructorName": "Lukas Ruebbelke", + "instructorSlug": "lukas-ruebbelke", + "date": "Jun 5, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "React.js (with Introduction to Flux Architecture)", + "href": "\/courses\/react-intro-to-flux\/", + "instructorName": "Ryan Florence", + "instructorSlug": "ryan-florence", + "date": "May 8, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Responsive HTML Email Design", + "href": "\/courses\/responsive-email\/", + "instructorName": "Justine Jordan", + "instructorSlug": "justine-jordan", + "date": "Apr 13, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Advanced JS Fundamentals to jQuery \u0026 Pure DOM Scripting", + "href": "\/courses\/javascript-jquery-dom\/", + "instructorName": "Justin Meyer", + "instructorSlug": "justin-meyer", + "date": "Mar 21, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "JavaScript: From Fundamentals to Functional JS", + "href": "\/courses\/js-fundamentals-to-functional\/", + "instructorName": "Bianca Gandolfo", + "instructorSlug": "bianca-gandolfo", + "date": "Jan 16, 2015", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "JS.Next: ES6 \/ ES2015", + "href": "\/courses\/jsnext-es6\/", + "instructorName": "Aaron Frost", + "instructorSlug": "aaron-frost", + "date": "Dec 15, 2014", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Responsive Typography", + "href": "\/courses\/responsive-typography\/", + "instructorName": "Jason Pamental", + "instructorSlug": "jason-pamental", + "date": "Nov 17, 2014", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Introduction to Web Development", + "href": "\/courses\/web-development\/", + "instructorName": "Nina Zakharenko", + "instructorSlug": "nina-zakharenko", + "date": "Oct 16, 2014", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Choosing a JavaScript Framework", + "href": "\/courses\/javascript-frameworks-showdown\/", + "instructorName": "Brian Holt", + "instructorSlug": "brian-holt", + "date": "Sep 10, 2014", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Hardcore Functional Programming in JavaScript", + "href": "\/courses\/functional-javascript\/", + "instructorName": "Brian Lonsdorf", + "instructorSlug": "brian-lonsdorf", + "date": "Aug 15, 2014", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Real-Time Web with Node.js", + "href": "\/courses\/realtime-html5-nodejs\/", + "instructorName": "Kyle Simpson", + "instructorSlug": "kyle-simpson", + "date": "Jul 12, 2014", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Advanced JavaScript", + "href": "\/courses\/advanced-javascript\/", + "instructorName": "Kyle Simpson", + "instructorSlug": "kyle-simpson", + "date": "Jun 14, 2014", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "HTML5 Media: Audio, Video \u0026 WebRTC", + "href": "\/courses\/html5-media-apis\/", + "instructorName": "Mark Boas", + "instructorSlug": "mark-boas", + "date": "Apr 8, 2014", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Front-End Tooling and Workflows with Grunt and Beyond", + "href": "\/courses\/workflows-and-tooling\/", + "instructorName": "David Mosher", + "instructorSlug": "david-mosher", + "date": "Mar 6, 2014", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Interactive Data Visualization with D3.js", + "href": "\/courses\/interactive-data-visualization-d3-js\/", + "instructorName": "Ian Johnson", + "instructorSlug": "ian-johnson", + "date": "Dec 20, 2013", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Angular 1.x Essentials", + "href": "\/courses\/angularjs-in-depth\/", + "instructorName": "Lukas Ruebbelke", + "instructorSlug": "lukas-ruebbelke", + "date": "Nov 19, 2013", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Backbone.js (with Introduction to Testing)", + "href": "\/courses\/backbone-js-in-depth-testing-mocha-sinon\/", + "instructorName": "Sam Breed", + "instructorSlug": "sam-breed", + "date": "Oct 16, 2013", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "CSS3 In-Depth", + "href": "\/courses\/css3-in-depth\/", + "instructorName": "Estelle Weyl", + "instructorSlug": "estelle-weyl", + "date": "Aug 25, 2013", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Web UI Architecture", + "href": "\/courses\/web-ui-architecture\/", + "instructorName": "Garann Means", + "instructorSlug": "garann-means", + "date": "Jul 3, 2013", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Lean Front-End Engineering", + "href": "\/courses\/lean-front-end-engineering\/", + "instructorName": "Bill Scott", + "instructorSlug": "bill-scott", + "date": "Jun 7, 2013", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Responsive Web Design", + "href": "\/courses\/responsive-web-design\/", + "instructorName": "Ben Callahan", + "instructorSlug": "ben-callahan", + "date": "Apr 30, 2013", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "Website Performance", + "href": "\/courses\/website-performance\/", + "instructorName": "Kyle Simpson", + "instructorSlug": "kyle-simpson", + "date": "Mar 29, 2013", + "free": false , + "bookmarked": false , + "watched": false + }, + + + + { + "title": "JavaScript the Good Parts", + "href": "\/courses\/javascript-the-good-parts\/", + "instructorName": "Douglas Crockford", + "instructorSlug": "douglas-crockford", + "date": "Feb 19, 2013", + "free": false , + "bookmarked": false , + "watched": false + } + ] + + // console.log(coursesData); + + +// const append=(coursesData)=>{ +// console.log('coursesData:', coursesData) + +// } +// append(coursesData) + + \ No newline at end of file diff --git a/styles/courses.css b/styles/courses.css new file mode 100644 index 0000000..cd7a2ae --- /dev/null +++ b/styles/courses.css @@ -0,0 +1,54 @@ +#main{ + width: 60%; + margin: auto; + /* display: flex; */ + /* flex-wrap: wrap; */ + display: grid; + grid-template-columns: repeat(2,1fr); + gap: 25px; + border: 1px solid green; +} +#main>div{ + width: 100%; + height: 300px; + /* display: grid; + grid-template-columns: repeat(2,1fr); */ + + border: 1px solid red; + /* background-color: red; */ + background: radial-gradient(circle at left,rgba(0,0,0,.6) 0,#000 25%); + background-image: radial-gradient(circle at left center, rgba(0, 0, 0, 0.6) 0px, rgb(0, 0, 0) 25%); + background-position-x: initial; + background-position-y: initial; + background-size: initial; + /* background-repeat-x: initial; */ + /* background-repeat-y: initial; */ + background-attachment: initial; + background-origin: initial; + background-clip: initial; + background-color: initial; +} +h1{ + color: #DD625E; +} +#btn1{ + background-color:#C02D28; + color: white; + padding: 10px 20px; + /* height: 45px; */ + margin-left: 25px; + border: none; + border-radius:40px; + line-height:1.25; +} +#btn2{ + background-color:#c94f17; +; + color: white; + padding: 10px 20px; + /* height: 45px; */ + margin-left: 25px; + border: none; + border-radius:40px; + line-height:1.25; +} \ No newline at end of file From dde38260b7c5734351005bdf11883d875a6c76d3 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Tue, 29 Mar 2022 12:13:37 +0530 Subject: [PATCH 03/32] Small Changes --- components/slider.js | 18 ++ components/slides.js | 70 +++++ index.html | 29 ++ scripts/data.js | 639 +++++++++++++++++++++++++++++++++++++++++++ scripts/index.js | 44 +++ styles/home-page.css | 131 +++++++++ 6 files changed, 931 insertions(+) create mode 100644 components/slider.js create mode 100644 components/slides.js create mode 100644 scripts/data.js create mode 100644 scripts/index.js create mode 100644 styles/home-page.css diff --git a/components/slider.js b/components/slider.js new file mode 100644 index 0000000..492f821 --- /dev/null +++ b/components/slider.js @@ -0,0 +1,18 @@ +const slider = () => { + return `
+

What They're Saying About Us (@FrontendMasters)

+
+
+
+ +
+
+
+
+
+ +
+
`; +}; + +export { slider }; diff --git a/components/slides.js b/components/slides.js new file mode 100644 index 0000000..80c2424 --- /dev/null +++ b/components/slides.js @@ -0,0 +1,70 @@ +const appendTwitterData = (data) => { + let parent = document.querySelector(".slides"); + parent.innerHTML = null; + data.map((el) => { + let slide = document.createElement("div"); + slide.className = "slide"; + + let arr = el; + arr.map((item) => { + // Slider Box + let slider_box = document.createElement("div"); + slider_box.className = "slider-box"; + + //Top + let slider_box_top = document.createElement("div"); + slider_box_top.className = "slider-box-top"; + + let profile_img = document.createElement("div"); + profile_img.className = "profile-img"; + + let img = document.createElement("img"); + img.src = item.profile_pic; + profile_img.append(img); + + let user_div = document.createElement("div"); + user_div.className = "user"; + + let profile_name = document.createElement("p"); + profile_name.className = "profile-name"; + profile_name.innerText = item.name; + + let user_name = document.createElement("p"); + user_name.className = "user-name"; + user_name.innerText = item.user_name; + + user_div.append(profile_name, user_name); + + let icon_div = document.createElement("div"); + icon_div.className = "twit-icon"; + + icon_div.innerHTML = ``; + + //Mid + let slider_box_mid = document.createElement("div"); + slider_box_mid.className = "slider-box-mid"; + + let msg = document.createElement("p"); + msg.className = "msg"; + msg.innerText = item.msg; + + //Bottom + let slider_box_bottom = document.createElement("div"); + slider_box_bottom.className = "slider-box-bottom"; + + let time = document.createElement("p"); + time.className = "time"; + time.innerText = item.time; + + slider_box_top.append(profile_img, user_div, icon_div); + slider_box_mid.append(msg); + slider_box_bottom.append(time); + slider_box.append(slider_box_top, slider_box_mid, slider_box_bottom); + + slide.append(slider_box); + }); + parent.append(slide); + }); +}; + +export { appendTwitterData }; diff --git a/index.html b/index.html index e69de29..2a5abc5 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + Document + + + + + +
+ + + + diff --git a/scripts/data.js b/scripts/data.js new file mode 100644 index 0000000..60b050c --- /dev/null +++ b/scripts/data.js @@ -0,0 +1,639 @@ +let twittweData = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "AJ Thompson", + user_name: "@ajthompson", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@acandael @scotups @FrontendMasters @FrontendMasters always delivers great courses. I’ve taken all of @scotups. He teaches in a way that feels like a conversation amongst friends.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Dave Halewood", + user_name: "@halewood", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@kieranmv95 @FrontendMasters Yes definitely, I’ve had membership for a couple of years, really good content given by top instructors.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; + +let mid_data = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Bhargav", + user_name: "@CodeWithBhargav", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Kevin Powell", + user_name: "@kevinjPowell", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; + +let small_data = [ + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], + [ + { + name: "Negar Jamalifard", + user_name: "@NegarDev", + profile_pic: + "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", + time: "8:56pm · Dec 16, 2021", + }, + { + name: "Brennnan.eth", + user_name: "@brennan", + profile_pic: + "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", + msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", + time: "8:56pm · Dec 16, 2021", + }, + ], +]; +localStorage.setItem("twitter_data", JSON.stringify(twittweData)); +localStorage.setItem("t_mid_data", JSON.stringify(mid_data)); +localStorage.setItem("t_small_data", JSON.stringify(small_data)); diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..46384cb --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,44 @@ +import { slider } from "../components/slider.js"; +import { appendTwitterData } from "../components/slides.js"; +let slider_con = document.querySelector(".slider-container"); +slider_con.innerHTML = slider(); + +let twitter_data = JSON.parse(localStorage.getItem("twitter_data")); +let mid_data = JSON.parse(localStorage.getItem("t_mid_data")); +let small_data = JSON.parse(localStorage.getItem("t_small_data")); +appendTwitterData(twitter_data); + +let slides = [...document.querySelectorAll(".slide")]; +let i = 0; + +let mleft = 0; +const prevItem = () => { + if (i - 1 < 0) { + // i = slides.length; + for (let k = 0; k < slides.length - 1; k++) { + nextItem(); + } + return; + } + mleft = 0; + slides[i - 1].style.marginLeft = mleft + "px"; + i--; +}; + +const nextItem = () => { + if (i == slides.length - 1) { + for (let k = 0; k < slides.length - 1; k++) { + prevItem(); + } + return; + } + mleft = -1176; + i++; + slides[i - 1].style.marginLeft = mleft + "px"; +}; + +let prev = document.getElementById("prev"); +let next = document.getElementById("next"); + +prev.addEventListener("click", prevItem); +next.addEventListener("click", nextItem); diff --git a/styles/home-page.css b/styles/home-page.css new file mode 100644 index 0000000..36f30fa --- /dev/null +++ b/styles/home-page.css @@ -0,0 +1,131 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Open Sans, sans-serif; +} +.slider-container { + width: 100%; + margin: auto; + display: flex; + align-items: center; + flex-direction: column; + background-color: #074179; + padding: 30px; +} +.slider { + width: 1600px; + /* height: 500px; */ + border-radius: 10px; + overflow: hidden; +} +.s-top { + font-size: 27px; + color: #fff; + margin-bottom: 20px; +} + +.s-bottom { + display: flex; + align-items: center; + justify-content: center; + max-width: 1260px; +} + +.slides { + width: 500%; + /* height: 500px; */ + display: flex; +} +/* .slide { + +} */ + +.left-btn { + margin-right: 30px; +} +.right-btn { + margin-left: 30px; +} + +#prev, +#next { + font-size: 50px; + font-weight: bolder; + color: #fff; + background: transparent; + border: none; + cursor: pointer; +} + +.slide { + display: grid; + grid-template-columns: repeat(3, 365px); + gap: 20px; + padding: 20px; + align-items: start; + /* width: 1600px; */ + transition: margin-left 0.5s ease-in-out; +} + +.slider-box { + background-color: #fff; + border-radius: 7px; + padding: 16px; +} + +.slider-box-top { + display: flex; + align-items: flex-start; + margin-bottom: 15px; + cursor: pointer; +} +.slider-box-top .profile-img { + width: 50px; + height: 50px; + border-radius: 50%; + overflow: hidden; + margin-right: 12px; +} +.slider-box-top .profile-img img { + width: 100%; + object-fit: contain; +} + +.user .profile-name { + font-size: 16px; + font-weight: 600; + margin-bottom: 4px; + color: #222; + letter-spacing: 0.5px; +} +.user .profile-name:hover { + text-decoration: underline; + cursor: pointer; +} + +.user .user-name { + color: #8a8a8a; + font-size: 14px; +} + +.twit-icon { + margin-left: auto; + color: #1da1f2; + font-size: 21px; +} + +.slider-box-mid { + line-height: 1.4; + font-size: 17px; + color: #222; + margin-bottom: 10px; + letter-spacing: 0.5px; +} + +.slider-box-bottom { + border-top: 1px solid #ccc; + font-size: 14px; + padding-top: 10px; + color: #8a8a8a; +} From dc7db4605b521c847475390824f1debd08417b85 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Tue, 29 Mar 2022 14:49:18 +0530 Subject: [PATCH 04/32] Fixed Slider --- scripts/index.js | 33 +++++++++++++++++-- {components => scripts}/slides.js | 0 styles/home-page.css | 54 +++++++++++++++++++++++++++---- 3 files changed, 78 insertions(+), 9 deletions(-) rename {components => scripts}/slides.js (100%) diff --git a/scripts/index.js b/scripts/index.js index 46384cb..31162ff 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,12 +1,22 @@ import { slider } from "../components/slider.js"; -import { appendTwitterData } from "../components/slides.js"; +import { appendTwitterData } from "./slides.js"; + +// Slider Container let slider_con = document.querySelector(".slider-container"); slider_con.innerHTML = slider(); +// get Data based on different Screen Size let twitter_data = JSON.parse(localStorage.getItem("twitter_data")); let mid_data = JSON.parse(localStorage.getItem("t_mid_data")); let small_data = JSON.parse(localStorage.getItem("t_small_data")); -appendTwitterData(twitter_data); +let screen_size = window.screen.width; +if (screen_size >= 1030) { + appendTwitterData(twitter_data); +} else if (screen_size >= 770 && screen_size <= 1029) { + appendTwitterData(mid_data); +} else if (screen_size <= 779) { + appendTwitterData(small_data); +} let slides = [...document.querySelectorAll(".slide")]; let i = 0; @@ -32,7 +42,16 @@ const nextItem = () => { } return; } - mleft = -1176; + let size = window.screen.width; + if (size >= 1030 && size <= 1330) { + mleft = -873; + } else if (screen_size >= 770 && screen_size <= 1029) { + mleft = -581; + } else if (screen_size <= 779) { + mleft = -267; + } else { + mleft = -1176; + } i++; slides[i - 1].style.marginLeft = mleft + "px"; }; @@ -42,3 +61,11 @@ let next = document.getElementById("next"); prev.addEventListener("click", prevItem); next.addEventListener("click", nextItem); + +let resizeTimeout; +window.addEventListener("resize", function (event) { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(function () { + window.location.reload(); + }, 1500); +}); diff --git a/components/slides.js b/scripts/slides.js similarity index 100% rename from components/slides.js rename to scripts/slides.js diff --git a/styles/home-page.css b/styles/home-page.css index 36f30fa..f5236f5 100644 --- a/styles/home-page.css +++ b/styles/home-page.css @@ -14,7 +14,7 @@ padding: 30px; } .slider { - width: 1600px; + max-width: 1187px; /* height: 500px; */ border-radius: 10px; overflow: hidden; @@ -28,12 +28,11 @@ .s-bottom { display: flex; align-items: center; - justify-content: center; - max-width: 1260px; + justify-content: space-between; + width: 100%; } - -.slides { - width: 500%; +.sli .slides { + /* width: 500%; */ /* height: 500px; */ display: flex; } @@ -57,6 +56,9 @@ border: none; cursor: pointer; } +.slides { + display: flex; +} .slide { display: grid; @@ -129,3 +131,43 @@ padding-top: 10px; color: #8a8a8a; } + +/* Screen */ +/* Mid Desktop screens */ +@media only screen and (min-width: 1030px) and (max-width: 1330px) { + .slider { + max-width: 887px; + } + .slide { + grid-template-columns: repeat(3, 265px); + } +} + +/* Tablet Screen */ +@media only screen and (min-width: 770px) and (max-width: 1029px) { + .slider { + max-width: 576px; + } + .slide { + grid-template-columns: repeat(2, 260px); + } +} + +/* Small Screen */ +@media only screen and (min-width: 0px) and (max-width: 779px) { + .s-top { + font-size: 20px; + color: #fff; + margin-bottom: 20px; + text-align: center; + } + .slider-container { + padding: 0; + } + .slider { + max-width: 280px; + } + .slide { + grid-template-columns: repeat(1, 230px); + } +} From 1a49229abe8a195f8ef2bebf3fc597ea649d7876 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Tue, 29 Mar 2022 21:14:02 +0530 Subject: [PATCH 05/32] small fix --- components/navbar.js | 9 +- index.html | 3 - styles/nav.css | 254 ++++++++++++++++++++++--------------------- 3 files changed, 135 insertions(+), 131 deletions(-) diff --git a/components/navbar.js b/components/navbar.js index fb8d869..5598d50 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -1,5 +1,5 @@ -function navbar(){ - return ` `; } -export default navbar; \ No newline at end of file +export default navbar; diff --git a/index.html b/index.html index 57b39de..09d1e5f 100644 --- a/index.html +++ b/index.html @@ -146,11 +146,8 @@

import footer from "./components/footer.js"; document.querySelector("#footer").innerHTML = footer(); - - + diff --git a/scripts/learn-page.js b/scripts/learn-page.js new file mode 100644 index 0000000..dab251c --- /dev/null +++ b/scripts/learn-page.js @@ -0,0 +1,3 @@ +import navbar from "../components/navbar.js"; +let header = document.querySelector(".header"); +header.innerHTML = navbar(); diff --git a/styles/learn-page.css b/styles/learn-page.css new file mode 100644 index 0000000..d55e723 --- /dev/null +++ b/styles/learn-page.css @@ -0,0 +1,6 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Open Sans, sans-serif; +} diff --git a/styles/nav.css b/styles/nav.css index 7299c30..86b9c4e 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -1,159 +1,71 @@ .header { - border-bottom: 1px solid black; width: 100%; - height: 80px; - top: 0%; - left: 0; - padding-left: 0; - box-sizing: border-box; - overflow: hidden; - background-color: black; background: linear-gradient(90deg, #c02d28, #e66225); - /* position: fixed; */ -} -.header ul { - list-style-type: none; -} -* { - margin: 0; - padding: 0; -} -a { - text-decoration: none; + color: #e6e6e6; + position: relative; + z-index: 99; + position: relative; } -.navbar { + +.header-wrap { + background: rgba(0, 0, 0, 0.7); + padding: 14px 112px; display: flex; justify-content: space-between; + flex-wrap: wrap; align-items: center; - padding: 0; - background: rgba(0, 0, 0, 0.7); - /* background-color: black; */ -} -.hamburger { - display: none; } -.navbar .diagonal { - fill: #e66225; - height: 24px; - left: 0; - pointer-events: none; - position: absolute; - top: 100%; +.header-wrap .left { + width: 40%; +} +.header-wrap .left .logo { + width: 250px; +} +.header-wrap .left .logo img { width: 100%; + height: 100%; + object-fit: contain; } -.bar { - display: block; - width: 25px; - height: 1.5px; - margin: 8px auto; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - background-color: #fff; -} -.nav-menu { +.header-wrap .right ul { display: flex; - justify-content: space-between; align-items: center; } - -.nav-item { - margin-left: 25px; -} - -.nav-link { - font-size: 20px; - font-weight: 400; - color: rgb(177, 165, 165); -} -.nav-link:hover { - color: white; -} -.navbar button { - background: #c94f17; - border: none; +.header-wrap .right ul li:last-child { + background-color: #c02d28; border-radius: 40px; - + transition: background 0.2s ease; + margin-left: 14px; +} +.header-wrap .right ul li:last-child a { + line-height: 40px; + padding: 0px 4px; + font-size: 17px; color: #fff; - display: block; - font-size: 20px; - line-height: 1.25; - padding: 7px 20px; - text-align: center; - /* margin-right: 20px; */ - height: 40px; - width: 150px; - font-weight: bold; - box-sizing: border-box; } -.navbar button:hover { - background-color: chocolate; +.header-wrap .right ul li:last-child:hover { + background: #d43530; } -#logo { - width: 240px; - /* margin-left: 30px; */ - cursor: pointer; - margin: 10px 80px; - height: 50px; +.header-wrap .right ul li { + list-style: none; } -@media all and (max-width: 768px) and (min-width: 381px) { - .navbar { - display: flex; - flex-direction: column; - } - .header { - height: 130px; - } +.header-wrap .right ul li a { + margin: 0 10px; + text-decoration: none; + color: #aaaaaa; + transition: color 0.2s ease; +} +.header-wrap .right ul li a:hover { + color: #e6e6e6; } -@media all and (min-width: 50px) and (max-width: 380px) { - .header .hamburger { - display: block; - cursor: pointer; - } - #logo { - width: 240px; - /* margin-left: 30px; */ - cursor: pointer; - margin: 10px 20px; - height: 50px; - } - .hamburger.active .bar:nth-child(2) { - opacity: 0; - } - - .hamburger.active .bar:nth-child(1) { - transform: translateY(8px) rotate(45deg); - } - - .hamburger.active .bar:nth-child(3) { - transform: translateY(-8px) rotate(-45deg); - } - - .nav-menu { - position: fixed; - /* position: relative; */ - left: -100%; - top: 5rem; - flex-direction: column; - background-color: #000000d0; - width: 100%; - border-radius: 10px; - text-align: center; - transition: 0.3s; - box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); - } - - .nav-menu.active { - left: 0; - } - - .nav-item { - margin: 2.5rem 0; - } - .header .hamburger { - display: block; - cursor: pointer; - } +.header .diagonal { + fill: #e66225; + height: 24px; + left: 0; + pointer-events: none; + position: absolute; + top: 100%; + width: 100%; } From 6640a5589f047a2cde10c918968e6ab0abb59113 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Wed, 30 Mar 2022 15:11:49 +0530 Subject: [PATCH 10/32] Issue in Progress-bar --- components/navbar.js | 16 +++- index.html | 5 +- learn.html | 106 +++++++++++++++++++++++ scripts/learn-page.js | 23 +++++ styles/learn-page.css | 195 ++++++++++++++++++++++++++++++++++++++++++ styles/nav.css | 59 +++++++++++++ 6 files changed, 400 insertions(+), 4 deletions(-) diff --git a/components/navbar.js b/components/navbar.js index 1c87de4..f7ca78d 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -19,7 +19,21 @@ function navbar() {
  • Join Now
    • +
    +
    + +
    +
    +
    + +
    - + diff --git a/index.html b/index.html index 09d1e5f..cd0cfd1 100644 --- a/index.html +++ b/index.html @@ -146,10 +146,9 @@

    import footer from "./components/footer.js"; document.querySelector("#footer").innerHTML = footer(); - const hamburger = document.querySelector(".hamburger"); - const navMenu = document.querySelector(".nav-menu"); + const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); hamburger.addEventListener("click", function () { - hamburger.classList.toggle("active"); navMenu.classList.toggle("active"); }); diff --git a/learn.html b/learn.html index 8e95daf..7b0b337 100644 --- a/learn.html +++ b/learn.html @@ -19,6 +19,112 @@
    + +
    +
    + + + + + + + + + + + + + + + + + + +

    Learning Paths

    +

    + Guided paths to expand your abilities as a well-rounded engineer! +

    +
    +
    +
    +
    +
    +
    +
    0%
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Beginner

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, + dolorum. +

    +
    + +
    +
    +
    + diff --git a/scripts/learn-page.js b/scripts/learn-page.js index dab251c..c582151 100644 --- a/scripts/learn-page.js +++ b/scripts/learn-page.js @@ -1,3 +1,26 @@ import navbar from "../components/navbar.js"; let header = document.querySelector(".header"); header.innerHTML = navbar(); +const numb = document.querySelector(".numb"); +let counter = 0; +let id = setInterval(() => { + if (counter == 100) { + let right_div = document.querySelector(".bar.right"); + right_div.classList.add("reverse"); + let left_div = document.querySelector(".bar.left"); + left_div.classList.add("reverse-left"); + let innerId = setInterval(() => { + if (counter == 0) { + clearInterval(innerId); + } else { + counter -= 1; + + numb.textContent = counter + "%"; + } + }, 20); + clearInterval(id); + } else { + counter += 1; + numb.textContent = counter + "%"; + } +}, 20); diff --git a/styles/learn-page.css b/styles/learn-page.css index d55e723..44dc7ac 100644 --- a/styles/learn-page.css +++ b/styles/learn-page.css @@ -4,3 +4,198 @@ box-sizing: border-box; font-family: Open Sans, sans-serif; } +.path-container { + width: 100%; + padding-top: 40px; + background-color: #222222; +} + +.p-top, +.p-bottom { + max-width: 950px; + margin: auto; +} + +.p-top { + text-align: center; + color: #fff; +} +.p-top svg { + width: 130px; +} +.p-top h1 { + margin-bottom: 15px; +} +.p-top h2 { + font-size: 16px; + font-weight: 400; +} + +.p-bottom { + display: flex; + gap: 10px; + flex-wrap: wrap; +} +.p-bottom .p-box { + width: 32%; + background-color: #383838; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, + rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + padding: 10px; + text-align: center; +} + +.circular { + height: 100px; + width: 100px; + position: relative; +} +.circular .inner, +.circular .outer, +.circular .circle { + position: absolute; + z-index: 6; + height: 100%; + width: 100%; + border-radius: 100%; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); +} +.circular .inner { + top: 50%; + left: 50%; + height: 80px; + width: 80px; + margin: -40px 0 0 -40px; + background-color: #dde6f0; + border-radius: 100%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); +} +.circular .circle { + z-index: 1; + box-shadow: none; +} +.circular .numb { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + font-size: 18px; + font-weight: 500; + color: #4158d0; +} +.circular .bar { + position: absolute; + height: 100%; + width: 100%; + background: #fff; + -webkit-border-radius: 100%; + clip: rect(0px, 100px, 100px, 50px); +} +.circle .bar .progress { + position: absolute; + height: 100%; + width: 100%; + -webkit-border-radius: 100%; + clip: rect(0px, 50px, 100px, 0px); +} +.circle .bar .progress, +.dot span { + background: #4158d0; +} +.circle .left .progress { + z-index: 1; + animation: left 1s linear both; +} +@keyframes left { + 100% { + transform: rotate(180deg); + } +} +.circle .right { + z-index: 3; + transform: rotate(180deg); +} +.circle .reverse { + /* transform: rotate(0deg); */ +} + +.circle .right .progress { + animation: right 1s linear both; + animation-delay: 1s; + /* animation: rightRreverse 4s linear both; + animation-delay: 16s; */ +} +@keyframes right { + 100% { + transform: rotate(180deg); + } +} + +.circle .dot { + z-index: 2; + position: absolute; + left: 50%; + top: 50%; + width: 50%; + height: 10px; + margin-top: -5px; + animation: dot 2s linear both; + transform-origin: 0% 50%; +} +.circle .dot span { + position: absolute; + right: 0; + width: 10px; + height: 10px; + border-radius: 100%; +} +.circle .reverse-left .progress { + animation: leftRreverse 1s linear both; + animation-delay: 1s; +} +@keyframes leftRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } +} +.circle .reverse .progress { + animation: rightRreverse 1s linear both; +} +@keyframes rightRreverse { + 0% { + transform: rotate(180deg); + } + 100% { + transform: rotate(0deg); + } +} +@keyframes dot { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } +} +@keyframes dot-reverse { + 0% { + transform: rotate(-90deg); + } + 50% { + transform: rotate(90deg); + z-index: 4; + } + 100% { + transform: rotate(270deg); + z-index: 4; + } +} diff --git a/styles/nav.css b/styles/nav.css index 86b9c4e..04b8dd0 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -69,3 +69,62 @@ top: 100%; width: 100%; } +.menu { + display: none; +} +.mobile { + display: none; +} + +@media all and (max-width: 768px) and (min-width: 381px) { + .header-wrap { + padding: 14px; + } +} + +@media all and (min-width: 50px) and (max-width: 380px) { + .header-wrap { + padding: 11px 12px; + } + .header-wrap .left .logo { + width: 197px; + } + .header-wrap .right { + display: none; + } + .mobile { + display: none; + background: rgba(0, 0, 0, 0.7); + text-align: left; + padding: 11px 12px; + } + .header .active { + display: block; + } + .mobile ul li { + list-style: none; + margin-bottom: 18px; + } + .mobile ul li a { + color: #aaaaaa; + text-decoration: none; + } + .mobile ul li:last-child { + background-color: #c02d28; + border-radius: 40px; + transition: background 0.2s ease; + text-align: center; + } + .mobile ul li:last-child a { + line-height: 40px; + padding: 0px 4px; + font-size: 17px; + color: #fff; + } + .menu { + display: flex; + } + .menu .icon { + font-size: 32px; + } +} From 166796aa0f5dd0075e34429775ab941e1c6f8b33 Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Wed, 30 Mar 2022 16:01:35 +0530 Subject: [PATCH 11/32] Course Page Almost Done --- courses.html | 13 +++++++ scripts/courses.js | 16 +++++++-- styles/courses.css | 88 +++++++++++++++++++++++++++------------------- 3 files changed, 79 insertions(+), 38 deletions(-) diff --git a/courses.html b/courses.html index c595292..7e67bef 100644 --- a/courses.html +++ b/courses.html @@ -1005,6 +1005,19 @@ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nobis maiores perspiciatis dolor! Id voluptatum aliquam quia, reiciendis debitis ut magnam pariatur! Dolor consectetur alias esse quasi, fugiat perspiciatis temporibus?"; } + //time Data + + for (let i = 1; i < 87; i++) { + coursesData[i].time = + Math.floor(Math.random() * 13) + + " " + + "hours" + + " " + + Math.floor(Math.random() * 60) + + " " + + "Minutes"; + } + console.log(coursesData); import append from "./scripts/courses.js"; diff --git a/scripts/courses.js b/scripts/courses.js index 7d718c8..79b375e 100644 --- a/scripts/courses.js +++ b/scripts/courses.js @@ -76,14 +76,26 @@ const append = (data, parent)=>{ let descrClass = document.createElement("div"); descrClass.className = "descrClass"; + + let description = document.createElement("p"); + description.innerText = el.course_description; + description.className="description" + + descrClass.append(description); let timeClass = document.createElement("div"); timeClass.className = "timeClass"; - let time = document.createElement("p"); + let time = document.createElement("div"); time.innerText = el.time; - time.className="time"; + time.className = "time"; + + let caption = document.createElement("strong"); + caption.innerText = "CC"; + caption.className = "caption" + + time.append( caption) timeClass.append(time); diff --git a/styles/courses.css b/styles/courses.css index 4540231..86415bc 100644 --- a/styles/courses.css +++ b/styles/courses.css @@ -1,5 +1,9 @@ *{ + font-family: sans-serif; + } + body{ background-color: #222222; + } #main { @@ -11,48 +15,52 @@ display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(10, 1fr); - grid-gap:20px; + grid-gap:80px; } .c { width: 451px; height: 377px; + position: relative; /* border: 5px solid red; */ /* background-color: aqua; */ } #outer { width: 377.5px; - height: 377.5px; + height: 360px; /* border: 5px solid yellow; */ - opacity: .2; + opacity: 1; /* background-color: green; */ } #inner { - width: 451px; - height: 377.5px; - margin: -377px 0 0 30px; - /* border: 5px solid green; */ - /* background-color: yellow; */ + width: 400px; + height: 360px; + position: absolute; + top:-.01px; + left: 80px; + background-image: radial-gradient(circle at left center, rgba(0, 0, 0, 0.3) 0px, rgb(0, 0, 0) 25%); } .btnClass{ - height: 40px; + height: 20px; width: 87%; /* border:solid 1px white; */ - padding: 30px; + padding: 15px; margin-left: 0px; } .descriptionClass{ height: 280px; width: 100%; /* border:solid 1px white; */ - - - + } + .description{ + color: white; + margin-left:20px; + font-size:14px; } .title{ @@ -74,14 +82,26 @@ .timeClass{ height: 40px; width: 100%; + display: inline-block; + /* border:solid 1px yellow */ } .time{ - color: white; + color:#6f7e78; margin-left:20px; margin-top: 3px; } + .caption{ + color:#222; + margin-left: 5px; + background-color:rgb(138, 138, 138); + padding:0 4px; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + + } .instructor_img{ @@ -135,39 +155,35 @@ #main { grid-template-columns: repeat(1 ,1fr); } - /* #inner { - width: 80%; - height: 100%; - margin: -100px 0 0 80px; - border: 1px solid green; - background-color: yellow; - } */ - #inner { - width: 451px; - height: 377.5px; - margin: -377px 0 0 30px; - /* border: 5px solid green; */ - /* background-color: yellow; */ + + #inner { + width: 400px; + height: 360px; + position: absolute; + top:-.01px; + left: 80px; background-image: radial-gradient(circle at left center, rgba(0, 0, 0, 0.3) 0px, rgb(0, 0, 0) 25%); } + + } @media all and (min-width: 50px) and (max-width: 380px) { #main { grid-template-columns: repeat(1 ,1fr); - /* margin-top: -10px; */ } - /* #inner { - width: 80%; - height: 100%; - margin: -100px 0 0 80px; - border: 1px solid green; - background-color: yellow; - } */ + #inner { + width: 400px; + height: 360px; + position: absolute; + top:-.01px; + left: 80px; + + background-image: radial-gradient(circle at left center, rgba(0, 0, 0, 0.3) 0px, rgb(0, 0, 0) 25%); + } } #courses_img{ height: 100%; width: 100%; - /* opacity: 30% ; */ } \ No newline at end of file From 9cfac60e1ab38defdc9991c4264a550cd58ef075 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Wed, 30 Mar 2022 23:43:19 +0530 Subject: [PATCH 12/32] 90% Done Learn-page --- components/path.js | 78 +++++++++++++++++ learn.html | 123 +++++---------------------- scripts/data.js | 191 ++++++++++++++++++++++++++++++++++++++++++ scripts/learn-page.js | 77 ++++++++++++----- styles/learn-page.css | 142 +++++++++++++++++++++++++++---- 5 files changed, 467 insertions(+), 144 deletions(-) create mode 100644 components/path.js diff --git a/components/path.js b/components/path.js new file mode 100644 index 0000000..ed810a6 --- /dev/null +++ b/components/path.js @@ -0,0 +1,78 @@ +const pathContainer = (svg, title, msg) => { + return `
    + ${svg} +

    ${title}

    +

    + ${msg} +

    +
    +
    +
    + `; +}; + +const getElem = (tag_name, class_name) => { + let tag = document.createElement(tag_name); + tag.className = class_name; + return tag; +}; + +const appedData = (data, parent) => { + parent.innerHTML = null; + data.map((el) => { + let p_box = getElem("div", "p-box"); + + // Progress Bar + let circular = getElem("div", "circular"); + + let inner = getElem("div", "inner"); + + let outer = getElem("div", "outer"); + + let numb = getElem("div", `numb ${el.class}`); + let numb_img_box = getElem("div", "img"); + if (el.img == "") { + numb_img_box.innerHTML = el.icon; + } else { + let img = getElem("img", ""); + img.src = el.img; + numb_img_box.append(img); + } + let p = getElem("p", ""); + p.innerHTML = "0%"; + numb.append(numb_img_box, p); + + let circle = getElem("div", "circle"); + let dot = getElem("div", "dot"); + let span = getElem("div", el.class); + dot.append(span); + + let bar_left = getElem("div", "bar left"); + let left_progress = getElem("div", "progress"); + bar_left.append(left_progress); + + let bar_right = getElem("div", "bar right"); + let right_progress = getElem("div", "progress"); + bar_right.append(right_progress); + + let desc = getElem("div", "desc"); + + let title = getElem("h3", "title"); + title.innerText = el.title; + + let description = getElem("p", ""); + description.innerText = el.desc; + + let btn = getElem("button", el.class); + btn.innerText = "Start"; + + circle.append(dot, bar_left, bar_right); + circular.append(inner, outer, numb, circle); + desc.append(title, description); + + p_box.append(circular, desc, btn); + parent.append(p_box); + }); +}; + +export { pathContainer, appedData }; diff --git a/learn.html b/learn.html index 7b0b337..31413d5 100644 --- a/learn.html +++ b/learn.html @@ -14,117 +14,32 @@ + +
    -
    -
    - - - - - - - - - - - - - - - - - - -

    Learning Paths

    -

    - Guided paths to expand your abilities as a well-rounded engineer! -

    -
    -
    -
    -
    -
    -
    -
    0%
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Beginner

    -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, - dolorum. -

    -
    - -
    -
    -
    +
    + +
    + + diff --git a/scripts/data.js b/scripts/data.js index 60b050c..4146b1e 100644 --- a/scripts/data.js +++ b/scripts/data.js @@ -634,6 +634,197 @@ let small_data = [ }, ], ]; + +let learn_data = [ + { + title: "Beginner", + desc: "Your Path to Becoming a Career-Ready Web Developer!", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Professional", + desc: "Go From Professional Web Developer to Lead Engineer", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Expert", + desc: "Mind-Expanding Web Development Techniques to Emerging APIs in the Web Browser", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Computer Science", + desc: "Learning Computer Science with JavaScript", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Fullstack", + desc: "Expand Your Abilities and Master the Server", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, + { + title: "Design to Code", + desc: "Make Your Designs Come to Life Through Code!", + color: "#c94f17", + img: "", + icon: ``, + class: "orange", + }, +]; + +let map_svg = ` + + + + + + + + + + + + + + + + +`; + +let topic_icon = ``; + +let elective_data = [ + { + title: "JavaScript", + desc: "Write Professional, Modern JavaScript", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/ez/353342/svg/javascript-seeklogo.com.svg", + icon: ``, + class: "js", + }, + { + title: "CSS", + desc: "Learn CSS, from Laying Out Websites to Performant Animations", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/dj/370768/png/370768.png", + icon: ``, + class: "css", + }, + { + title: "Node.js", + desc: "Build Web APIs and Applications with Node.js", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/kk/353117/png/node-node-js-logo.png", + icon: ``, + class: "node", + }, + { + title: "React.js", + desc: "Be Productive with React.js, Today's Most Popular Framework", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/tx/353401/png/react-logo.png", + icon: ``, + class: "react", + }, + { + title: "Vue.js", + desc: "Learn Vue.js, An Easy to Pick Up and Powerful Framework", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/ep/353380/png/vuejs-logo.png", + icon: ``, + class: "vue", + }, + { + title: "Angular", + desc: "Learn Angular, a TypeScript-based web application framework led by Google", + color: "#c94f17", + img: "https://iconape.com/wp-content/files/mm/370537/png/370537.png", + icon: ``, + class: "angular", + }, +]; + +localStorage.setItem("elective_data", JSON.stringify(elective_data)); +localStorage.setItem("topic_icon", topic_icon); +localStorage.setItem("map_svg", map_svg); +localStorage.setItem("learn_data", JSON.stringify(learn_data)); localStorage.setItem("twitter_data", JSON.stringify(twittweData)); localStorage.setItem("t_mid_data", JSON.stringify(mid_data)); localStorage.setItem("t_small_data", JSON.stringify(small_data)); diff --git a/scripts/learn-page.js b/scripts/learn-page.js index c582151..f3701e1 100644 --- a/scripts/learn-page.js +++ b/scripts/learn-page.js @@ -1,26 +1,59 @@ +import { pathContainer, appedData } from "../components/path.js"; import navbar from "../components/navbar.js"; let header = document.querySelector(".header"); header.innerHTML = navbar(); -const numb = document.querySelector(".numb"); -let counter = 0; -let id = setInterval(() => { - if (counter == 100) { - let right_div = document.querySelector(".bar.right"); - right_div.classList.add("reverse"); - let left_div = document.querySelector(".bar.left"); - left_div.classList.add("reverse-left"); - let innerId = setInterval(() => { - if (counter == 0) { - clearInterval(innerId); - } else { - counter -= 1; - numb.textContent = counter + "%"; - } - }, 20); - clearInterval(id); - } else { - counter += 1; - numb.textContent = counter + "%"; - } -}, 20); +let map_svg = localStorage.getItem("map_svg"); +let topic_icon = localStorage.getItem("topic_icon"); +let path_conatiner = document.querySelector(".path-container"); +let elective_conatiner = document.querySelector(".elective-container"); +path_conatiner.innerHTML = pathContainer( + map_svg, + "Learning Paths", + "Guided paths to expand your abilities as a well-rounded engineer!" +); +elective_conatiner.innerHTML = pathContainer( + topic_icon, + "Topic Paths:", + "Focus on a specific area in web development." +); + +let learn_data = JSON.parse(localStorage.getItem("learn_data")); +let path_bottom = document.querySelector(".path-container > .p-bottom"); + +appedData(learn_data, path_bottom); +let elective_bottom = document.querySelector(".elective-container > .p-bottom"); +let elective_data = JSON.parse(localStorage.getItem("elective_data")); +appedData(elective_data, elective_bottom); + +// console.log(elective_bottom); + +const updateProgress = (item) => { + let counter = 0; + let numb = item.querySelector(".numb>p"); + let id = setInterval(() => { + if (counter == 100) { + let right_div = item.querySelector(".bar.right"); + right_div.classList.add("reverse"); + let left_div = item.querySelector(".bar.left"); + left_div.classList.add("reverse-left"); + let innerId = setInterval(() => { + if (counter == 0) { + clearInterval(innerId); + } else { + counter -= 1; + numb.textContent = counter + "%"; + } + }, 20); + clearInterval(id); + } else { + counter += 1; + numb.textContent = counter + "%"; + } + }, 20); +}; + +const p_box = document.querySelectorAll(".p-box"); +p_box.forEach((el) => { + updateProgress(el); +}); diff --git a/styles/learn-page.css b/styles/learn-page.css index 44dc7ac..4fb5079 100644 --- a/styles/learn-page.css +++ b/styles/learn-page.css @@ -4,7 +4,8 @@ box-sizing: border-box; font-family: Open Sans, sans-serif; } -.path-container { +.path-container, +.elective-container { width: 100%; padding-top: 40px; background-color: #222222; @@ -33,22 +34,30 @@ .p-bottom { display: flex; - gap: 10px; + gap: 20px; flex-wrap: wrap; + margin-top: 20px; + border-top: 1px solid #ffffff69; + padding-top: 20px; } .p-bottom .p-box { - width: 32%; + max-width: 303px; background-color: #383838; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; - padding: 10px; + padding: 20px; text-align: center; } .circular { - height: 100px; - width: 100px; + height: 200px; + width: 200px; position: relative; + margin: auto; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 40px; } .circular .inner, .circular .outer, @@ -61,12 +70,9 @@ box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); } .circular .inner { - top: 50%; - left: 50%; - height: 80px; - width: 80px; - margin: -40px 0 0 -40px; - background-color: #dde6f0; + height: 164px; + width: 164px; + background-color: #222222; border-radius: 100%; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } @@ -83,26 +89,79 @@ font-size: 18px; font-weight: 500; color: #4158d0; + display: flex; + align-items: center; + justify-content: center; +} +.circular .numb.orange { + color: #c63528; +} +.circular .numb p { + font-size: 70px; + color: #fff; } +.circular .numb .img { + position: absolute; + width: 100px; + height: 100px; + z-index: -1; + font-size: 95px; + color: #000; + opacity: 0.3; +} +.circular .numb .img img { + object-fit: contain; + width: 100%; + height: 100%; +} + .circular .bar { position: absolute; height: 100%; width: 100%; background: #fff; -webkit-border-radius: 100%; - clip: rect(0px, 100px, 100px, 50px); + clip: rect(0px, 220px, 220px, 100px); } .circle .bar .progress { position: absolute; height: 100%; width: 100%; -webkit-border-radius: 100%; - clip: rect(0px, 50px, 100px, 0px); + clip: rect(0px, 100px, 200px, 0px); } .circle .bar .progress, .dot span { background: #4158d0; } +.circle .bar .progress, +.dot span.orange { + background: #c63528; +} +.circle .bar .progress, +.dot span.js { + background: #b3911c; +} +.circle .bar .progress, +.dot span.css { + background: #278cc7; +} +.circle .bar .progress, +.dot span.node { + background: #00873a; +} +.circle .bar .progress, +.dot span.react { + background: #008697; +} +.circle .bar .progress, +.dot span.vue { + background: #00bb83; +} +.circle .bar .progress, +.dot span.angular { + background: #ff002f; +} .circle .left .progress { z-index: 1; animation: left 1s linear both; @@ -116,10 +175,6 @@ z-index: 3; transform: rotate(180deg); } -.circle .reverse { - /* transform: rotate(0deg); */ -} - .circle .right .progress { animation: right 1s linear both; animation-delay: 1s; @@ -142,6 +197,7 @@ margin-top: -5px; animation: dot 2s linear both; transform-origin: 0% 50%; + display: none; } .circle .dot span { position: absolute; @@ -154,6 +210,7 @@ animation: leftRreverse 1s linear both; animation-delay: 1s; } + @keyframes leftRreverse { 0% { transform: rotate(180deg); @@ -199,3 +256,52 @@ z-index: 4; } } + +.desc { + padding: 0 10px; + color: #fff; + height: 157px; + line-height: 25px; +} +.desc .title { + font-size: 27px; + margin-bottom: 20px; +} + +.desc p { + font-size: 16px; + word-spacing: 1; + margin-bottom: 20px; +} + +.p-box button { + margin: 0 auto; + min-width: 175px; + font-size: 14px; + padding: 10px 20px; + border-radius: 20px; + border: none; + color: #fff; + cursor: pointer; +} +.p-box button.orange { + background-color: #c63528; +} +.p-box button.js { + background-color: #b3911c; +} +.p-box button.css { + background-color: #278cc7; +} +.p-box button.node { + background-color: #00873a; +} +.p-box button.react { + background-color: #008697; +} +.p-box button.vue { + background-color: #00bb83; +} +.p-box button.angular { + background-color: #ff002f; +} From d6daa850bad60abcea3eb7c17cc0900394c9c370 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Thu, 31 Mar 2022 09:17:08 +0530 Subject: [PATCH 13/32] Complete learn page --- components/navbar.js | 16 +- components/path.js | 36 ++++- index.html | 14 +- learn.html | 4 + scripts/index.js | 24 ++- scripts/learn-page.js | 51 ++---- styles/learn-page.css | 29 ++-- styles/main.css | 357 +++++++++++++++++++++--------------------- styles/nav.css | 11 +- 9 files changed, 284 insertions(+), 258 deletions(-) diff --git a/components/navbar.js b/components/navbar.js index f7ca78d..727950f 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -1,5 +1,6 @@ function navbar() { - return `
    + return `
    +
    `; } -export default navbar; +const hamburgerClick = () => { + const hamburger = document.querySelector(".menu"); + const navMenu = document.querySelector(".mobile"); + hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); + }); +}; + +export { navbar, hamburgerClick }; diff --git a/components/path.js b/components/path.js index ed810a6..d19bfaf 100644 --- a/components/path.js +++ b/components/path.js @@ -48,11 +48,11 @@ const appedData = (data, parent) => { dot.append(span); let bar_left = getElem("div", "bar left"); - let left_progress = getElem("div", "progress"); + let left_progress = getElem("div", `progress ${el.class}`); bar_left.append(left_progress); let bar_right = getElem("div", "bar right"); - let right_progress = getElem("div", "progress"); + let right_progress = getElem("div", `progress ${el.class}`); bar_right.append(right_progress); let desc = getElem("div", "desc"); @@ -74,5 +74,35 @@ const appedData = (data, parent) => { parent.append(p_box); }); }; +const updateProgress = (item) => { + let counter = 0; + let numb = item.querySelector(".numb>p"); + let id = setInterval(() => { + if (counter == 100) { + let right_div = item.querySelector(".bar.right"); + right_div.classList.add("reverse"); + let left_div = item.querySelector(".bar.left"); + left_div.classList.add("reverse-left"); + let innerId = setInterval(() => { + if (counter == 0) { + clearInterval(innerId); + } else { + counter -= 1; + numb.textContent = counter + "%"; + } + }, 20); + clearInterval(id); + } else { + counter += 1; + numb.textContent = counter + "%"; + } + }, 20); +}; -export { pathContainer, appedData }; +const addEventToBox = () => { + const p_box = document.querySelectorAll(".p-box"); + p_box.forEach((el) => { + updateProgress(el); + }); +}; +export { pathContainer, appedData, addEventToBox }; diff --git a/index.html b/index.html index cd0cfd1..594e4c8 100644 --- a/index.html +++ b/index.html @@ -139,19 +139,7 @@

    - + diff --git a/scripts/index.js b/scripts/index.js index 31162ff..5c0ccb5 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,5 +1,13 @@ +import { navbar, hamburgerClick } from "../components/navbar.js"; import { slider } from "../components/slider.js"; import { appendTwitterData } from "./slides.js"; +import footer from "../components/footer.js"; + +document.querySelector(".header").innerHTML = navbar(); +document.querySelector("#footer").innerHTML = footer(); + +// Click Event on Hamburger Icon +hamburgerClick(); // Slider Container let slider_con = document.querySelector(".slider-container"); @@ -18,6 +26,7 @@ if (screen_size >= 1030) { appendTwitterData(small_data); } +// Slider JS let slides = [...document.querySelectorAll(".slide")]; let i = 0; @@ -62,10 +71,11 @@ let next = document.getElementById("next"); prev.addEventListener("click", prevItem); next.addEventListener("click", nextItem); -let resizeTimeout; -window.addEventListener("resize", function (event) { - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(function () { - window.location.reload(); - }, 1500); -}); +// On window resizing Event +// let resizeTimeout; +// window.addEventListener("resize", function (event) { +// clearTimeout(resizeTimeout); +// resizeTimeout = setTimeout(function () { +// window.location.reload(); +// }, 1500); +// }); diff --git a/scripts/learn-page.js b/scripts/learn-page.js index f3701e1..e5b13de 100644 --- a/scripts/learn-page.js +++ b/scripts/learn-page.js @@ -1,8 +1,17 @@ -import { pathContainer, appedData } from "../components/path.js"; -import navbar from "../components/navbar.js"; +import { pathContainer, appedData, addEventToBox } from "../components/path.js"; +import { navbar, hamburgerClick } from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); header.innerHTML = navbar(); +footer_container.innerHTML = footer(); + +// Click Event on Hamburger Icon +hamburgerClick(); +// Path-Container Top Component let map_svg = localStorage.getItem("map_svg"); let topic_icon = localStorage.getItem("topic_icon"); let path_conatiner = document.querySelector(".path-container"); @@ -18,42 +27,14 @@ elective_conatiner.innerHTML = pathContainer( "Focus on a specific area in web development." ); +// Path-Container bottom Component let learn_data = JSON.parse(localStorage.getItem("learn_data")); let path_bottom = document.querySelector(".path-container > .p-bottom"); - -appedData(learn_data, path_bottom); let elective_bottom = document.querySelector(".elective-container > .p-bottom"); let elective_data = JSON.parse(localStorage.getItem("elective_data")); -appedData(elective_data, elective_bottom); - -// console.log(elective_bottom); -const updateProgress = (item) => { - let counter = 0; - let numb = item.querySelector(".numb>p"); - let id = setInterval(() => { - if (counter == 100) { - let right_div = item.querySelector(".bar.right"); - right_div.classList.add("reverse"); - let left_div = item.querySelector(".bar.left"); - left_div.classList.add("reverse-left"); - let innerId = setInterval(() => { - if (counter == 0) { - clearInterval(innerId); - } else { - counter -= 1; - numb.textContent = counter + "%"; - } - }, 20); - clearInterval(id); - } else { - counter += 1; - numb.textContent = counter + "%"; - } - }, 20); -}; +appedData(learn_data, path_bottom); +appedData(elective_data, elective_bottom); -const p_box = document.querySelectorAll(".p-box"); -p_box.forEach((el) => { - updateProgress(el); -}); +// Add Event on every p_box +addEventToBox(); diff --git a/styles/learn-page.css b/styles/learn-page.css index 4fb5079..9d3491f 100644 --- a/styles/learn-page.css +++ b/styles/learn-page.css @@ -10,6 +10,9 @@ padding-top: 40px; background-color: #222222; } +.elective-container { + padding-bottom: 40px; +} .p-top, .p-bottom { @@ -39,6 +42,7 @@ margin-top: 20px; border-top: 1px solid #ffffff69; padding-top: 20px; + justify-content: center; } .p-bottom .p-box { max-width: 303px; @@ -130,36 +134,29 @@ -webkit-border-radius: 100%; clip: rect(0px, 100px, 200px, 0px); } -.circle .bar .progress, -.dot span { +.circle .bar .progress { background: #4158d0; } -.circle .bar .progress, -.dot span.orange { +.circle .bar .progress { background: #c63528; } -.circle .bar .progress, -.dot span.js { +.circle .bar .progress.js { background: #b3911c; } -.circle .bar .progress, -.dot span.css { +.circle .bar .progress.css { background: #278cc7; } -.circle .bar .progress, -.dot span.node { +.circle .bar .progress.node { background: #00873a; } -.circle .bar .progress, -.dot span.react { +.circle .bar .progress.react { background: #008697; } -.circle .bar .progress, -.dot span.vue { +.circle .bar .progress.vue { background: #00bb83; } -.circle .bar .progress, -.dot span.angular { + +.circle .bar .progress.angular { background: #ff002f; } .circle .left .progress { diff --git a/styles/main.css b/styles/main.css index 9037721..955d04b 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,37 +1,36 @@ -body{ - margin: 0; - padding: 0; - background: #222; - color: #e6e6e6; - font-family: Open Sans,sans-serif; - font-size: 16px; - /* line-height: 1.5; */ -} -*{ - box-sizing: border-box; - +body { + margin: 0; + padding: 0; + background: #222; + color: #e6e6e6; + font-family: Open Sans, sans-serif; + font-size: 16px; + /* line-height: 1.5; */ +} +* { + box-sizing: border-box; } #banner { - width: 100%; - /* margin-top: 100px; */ - height: 100vh; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - /* position: absolute; */ + width: 100%; + /* margin-top: 100px; */ + height: 100vh; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + /* position: absolute; */ } #banner video { - width: 100%; - position: absolute; - height: 100%; - object-fit: cover; - margin-top: 80px; - top:0; - left: 0; - pointer-events: none; -} -#banner #contents{ + width: 100%; + position: absolute; + height: 100%; + object-fit: cover; + margin-top: 80px; + top: 0; + left: 0; + pointer-events: none; +} +#banner #contents { position: relative; z-index: 1; max-width: 1000px; @@ -39,188 +38,188 @@ body{ text-align: center; } #banner #contents h1 { - font-size: 55px; + font-size: 55px; } #banner #contents h2 { - font-size: 34px; - margin-top: 0px; - margin-bottom: 15px; -} -#banner button, #join button { - background: #c94f17; - border: none; - border-radius: 40px; + font-size: 34px; + margin-top: 0px; + margin-bottom: 15px; +} +#banner button, +#join button { + background: #c94f17; + border: none; + border-radius: 40px; - color: #fff; - display: block; - font-size: 20px; - line-height: 1.25; - padding: 10px 20px; - text-align: center; - margin-right: 20px; - height: 60px; - width: 250px; - font-weight: bold; - + color: #fff; + display: block; + font-size: 20px; + line-height: 1.25; + padding: 10px 20px; + text-align: center; + margin-right: 20px; + height: 60px; + width: 250px; + font-weight: bold; } #banner a { - text-decoration: none; + text-decoration: none; } #banner #contents div { - display: flex; - margin-left: 25px; + display: flex; + margin-left: 25px; } #icons { - display: flex; - margin: auto; - width: 70%; - margin-top: 30px; - margin-bottom: 30px; - justify-content: space-between; - flex-wrap: wrap; - + display: flex; + margin: auto; + width: 70%; + margin-top: 30px; + margin-bottom: 30px; + justify-content: space-between; + flex-wrap: wrap; } #icons img { - height: 90px; - width: 90px; - margin-top: 10px; - margin-left: 10px; - + height: 90px; + width: 90px; + margin-top: 10px; + margin-left: 10px; + object-fit: contain; + transition: transform 0.5s ease; } #icons img:hover { - border: 1px solid #eff; - border-radius: 20px; - padding: 10px; - box-sizing: border-box; - + transform: scale(1.2); + box-sizing: border-box; } #slidebar { - background: #3a7bd5; /* fallback for old browsers */ -background: -webkit-linear-gradient(to right, #3a6073, #3a7bd5); /* Chrome 10-25, Safari 5.1-6 */ -background: linear-gradient(to right, #3a6073, #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ -width: 100%; -height: 600px; -margin-top: 10px; - + background: #3a7bd5; /* fallback for old browsers */ + background: -webkit-linear-gradient( + to right, + #3a6073, + #3a7bd5 + ); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient( + to right, + #3a6073, + #3a7bd5 + ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + width: 100%; + height: 600px; + margin-top: 10px; } #join { - height: 700px; - width: 100%; - box-sizing: border-box; - background-image:radial-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.8)), url("https://static.frontendmasters.com/assets/fm/js/static/bg2.c89a0cad3a.jpg"); - background-size: cover; - position: absolute; - overflow: hidden; - align-items: center; - display: flex; - justify-content: center; - margin-bottom: 50px; - text-align: center; - + height: 700px; + width: 100%; + box-sizing: border-box; + background-image: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), + url("https://static.frontendmasters.com/assets/fm/js/static/bg2.c89a0cad3a.jpg"); + background-size: cover; + position: absolute; + overflow: hidden; + align-items: center; + display: flex; + justify-content: center; + margin-bottom: 50px; + text-align: center; } #join div { - position: relative; - z-index: 1; - text-align: center; - margin: auto; - width: 40%; + position: relative; + z-index: 1; + text-align: center; + margin: auto; + width: 40%; } -#join h1{ - font-size: 35px; - line-height: 50px; +#join h1 { + font-size: 35px; + line-height: 50px; } #join button:hover { - background-color: chocolate; + background-color: chocolate; } -#bootcamp{ - margin-top: 700px; - height: 350px; - width: 100%; - text-align: center; - /* display: flex; */ - justify-content: center; - box-sizing: border-box; - align-items: center; - background-image:url("https://static.frontendmasters.com/assets/fm/js/static/bc-ad-bg.5d061b025d.png"); +#bootcamp { + margin-top: 700px; + height: 350px; + width: 100%; + text-align: center; + /* display: flex; */ + justify-content: center; + box-sizing: border-box; + align-items: center; + background-image: url("https://static.frontendmasters.com/assets/fm/js/static/bc-ad-bg.5d061b025d.png"); } #bootcamp img { - height: auto; - width: 240px; - margin-top: 30px; + height: auto; + width: 240px; + margin-top: 30px; } #bootcamp a { - color: #dd625e; - /* margin-top: 15px; */ + color: #dd625e; + /* margin-top: 15px; */ } #bootcamp a:hover { - color: chocolate; + color: chocolate; } #bootcamp p { - line-height: 27px; - margin-bottom: 15px; + line-height: 27px; + margin-bottom: 15px; } - -@media all and (max-width:768px) and (min-width:381px){ - #banner { - background-size:auto, cover; - z-index: 2; - object-fit: cover; - height: 100vh; - background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); - } - #banner video { - display: none; - - } - #join{ - height: 500px; - text-align: center; - } - #join div:first-child{ - width: 80%; - text-align: center; - } - /* #join button { +@media all and (max-width: 768px) and (min-width: 381px) { + #banner { + background-size: auto, cover; + z-index: 2; + object-fit: cover; + height: 100vh; + background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); + } + #banner video { + display: none; + } + #join { + height: 500px; + text-align: center; + } + #join div:first-child { + width: 80%; + text-align: center; + } + /* #join button { background-color: #222; } */ - #bootcamp{ - margin-top: 500px; - } - -} -@media all and (min-width:50px) and (max-width:380px){ - #banner { - background-size:auto, cover; - z-index: 2; - object-fit: cover; - height: 100vh; - - background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); - } - #banner video { - display: none; + #bootcamp { + margin-top: 500px; + } +} +@media all and (min-width: 50px) and (max-width: 380px) { + #banner { + background-size: auto, cover; + z-index: 2; + object-fit: cover; + height: 100vh; - } - #banner #contents h1 { - font-size: 30px; - /* color: #222; */ - } - #banner #contents h2 { - font-size: 15px; - /* margin-top: -15px; */ - } - #contents>div { - display: flex; - flex-direction: column; - } - #contents button { - margin-top: 20px; - } - #join div:first-child { - width: 90%; - } - #join div { - margin: 20px; - } -} \ No newline at end of file + background-image: url(" https://static.frontendmasters.com/assets/fm/js/static/bg1.8d7f86e8bd.jpg"); + } + #banner video { + display: none; + } + #banner #contents h1 { + font-size: 30px; + /* color: #222; */ + } + #banner #contents h2 { + font-size: 15px; + /* margin-top: -15px; */ + } + #contents > div { + display: flex; + flex-direction: column; + } + #contents button { + margin-top: 20px; + } + #join div:first-child { + width: 90%; + } + #join div { + margin: 20px; + } +} diff --git a/styles/nav.css b/styles/nav.css index 04b8dd0..118c54c 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -6,10 +6,13 @@ z-index: 99; position: relative; } - -.header-wrap { +.wrap { background: rgba(0, 0, 0, 0.7); +} +.header-wrap { + max-width: 1180px; padding: 14px 112px; + margin: auto; display: flex; justify-content: space-between; flex-wrap: wrap; @@ -79,6 +82,10 @@ @media all and (max-width: 768px) and (min-width: 381px) { .header-wrap { padding: 14px; + max-width: 592px; + } + .header-wrap .right ul li a { + margin: 0 6px; } } From 44a8f3ca1f2aad38aec3b2f77f1ea50370e3922f Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Thu, 31 Mar 2022 12:09:42 +0530 Subject: [PATCH 14/32] join complete --- Styles/joinnow.css | 1 + joinnow.html | 8 +++- scripts/joinnow.js | 109 +++++++++++++++++++++++++++++++++++---------- 3 files changed, 94 insertions(+), 24 deletions(-) diff --git a/Styles/joinnow.css b/Styles/joinnow.css index 48a1599..8a75830 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -545,3 +545,4 @@ width:80px; } } + diff --git a/joinnow.html b/joinnow.html index 153e511..35bcd4c 100644 --- a/joinnow.html +++ b/joinnow.html @@ -115,30 +115,36 @@

    Register for a Monthly Account

    Email (you'll need to confirm this email address)

    +

    First Name

    +

    Last Name

    +

    Password

    +

    Password Again

    +

    Choose Your Payment Method


    +

    - +

    By clicking Start Learning, you agree to our Terms of Service and Privacy Policy.

    diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 184d4b0..594cce1 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -23,33 +23,96 @@ function colorChange(item) { document.querySelector("#form").addEventListener("submit",myFormSubmit); var signinobj=JSON.parse(localStorage.getItem("registeredIds")) || []; + + +let a=document.getElementById("erremail") +let b=document.getElementById("errfname") +let c=document.getElementById("errlname") +let d=document.getElementById("errpassword") +let e=document.getElementById("errpasswordagain") +let f=document.getElementById("errcardname") +let g=document.getElementById("errcheck") //console.log(signinArr); function myFormSubmit(event){ - event.preventDefault(); + event.preventDefault(); + + if + ( + (document.getElementById("email").value=="")|| + (document.getElementById("first_name").value=="")|| + (document.getElementById("last_name").value=="")|| + (document.getElementById("password").value=="")|| + (document.getElementById("password_again").value=="")|| + (document.getElementById("placeholder").value=="")|| + (document.getElementById("card_num").value=="") + ) + { + a.innerText="Please enter a valid email." + a.style.color="red"; + a.style.fontStyle="italic"; + a.style.fontSize="16px"; + + b.innerText="Please enter your first name." + b.style.color="red"; + b.style.fontStyle="italic"; + b.style.fontSize="16px"; + + c.innerText="Please enter your last name." + c.style.color="red"; + c.style.fontStyle="italic"; + c.style.fontSize="16px"; + + d.innerText="Please enter correct password" + d.style.color="red"; + d.style.fontStyle="italic"; + d.style.fontSize="16px"; + + e.innerText="Please enter a matching password." + e.style.color="red"; + e.style.fontStyle="italic"; + e.style.fontSize="16px"; + + f.innerText="Your card number is incomplete." + f.style.color="red"; + f.style.fontStyle="italic"; + f.style.fontSize="16px"; + + g.innerText="Please check the box." + g.style.color="red"; + g.style.fontStyle="italic"; + g.style.fontSize="16px"; + + } + + else{ + var signinobj=[{ - email:document.querySelector("#email").value, - fname:document.querySelector("#first_name").value, - lname:document.querySelector("#last_name").value, - password:document.querySelector("#password").value, - password_again:document.querySelector("#password_again").value, - placeholder:document.querySelector("#placeholder").value, - card_num:document.querySelector("#card_num").value, - }]; - document.querySelector("#email").value=""; - document.querySelector("#first_name").value=""; - document.querySelector("#last_name").value=""; - document.querySelector("#password").value=""; - document.querySelector("#password_again").value=""; - document.querySelector("#placeholder").value=""; - document.querySelector("#card_num").value=""; - - - localStorage.setItem("registeredIds",JSON.stringify(signinobj)); - - - window.location.href="https://frontendmasters.com/" + email:document.querySelector("#email").value, + fname:document.querySelector("#first_name").value, + lname:document.querySelector("#last_name").value, + password:document.querySelector("#password").value, + password_again:document.querySelector("#password_again").value, + placeholder:document.querySelector("#placeholder").value, + card_num:document.querySelector("#card_num").value, + }]; + document.querySelector("#email").value=""; + document.querySelector("#first_name").value=""; + document.querySelector("#last_name").value=""; + document.querySelector("#password").value=""; + document.querySelector("#password_again").value=""; + document.querySelector("#placeholder").value=""; + document.querySelector("#card_num").value=""; - } + + localStorage.setItem("registeredIds",JSON.stringify(signinobj)); + + window.location.href="https://frontendmasters.com/" + } + + + } + + document.querySelector("#first").addEventListener("click",changeCol) document.querySelector("#sec").addEventListener("click",changeCol1) From 2932c980fd0064a74026203706f344be11a9838a Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Thu, 31 Mar 2022 15:46:18 +0530 Subject: [PATCH 15/32] issues --- Login.html | 183 +++++++++++++++++++++---------------------- components/navbar.js | 10 +-- index.html | 51 ------------ 3 files changed, 90 insertions(+), 154 deletions(-) diff --git a/Login.html b/Login.html index ccc2252..efad889 100644 --- a/Login.html +++ b/Login.html @@ -1,131 +1,126 @@ - - - - + + + + Document - - - - - + +
    -
    -
    -
    -
    -
    - Remember me
    - - Forgot your password? +
    +
    +
    +
    +
    + Remember me
    + + Forgot your password?
    - + - + diff --git a/components/navbar.js b/components/navbar.js index 727950f..b622597 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -52,12 +52,4 @@ function navbar() {
    `; } -const hamburgerClick = () => { - const hamburger = document.querySelector(".menu"); - const navMenu = document.querySelector(".mobile"); - hamburger.addEventListener("click", function () { - navMenu.classList.toggle("active"); - }); -}; - -export { navbar, hamburgerClick }; +export navbar ; diff --git a/index.html b/index.html index a11c544..b69af6c 100644 --- a/index.html +++ b/index.html @@ -62,57 +62,6 @@

    with In-Depth, Modern
    Front-End Engineering Courses

    -
    - - JS - - - React - - - TS - - Node - Vue3 - Angular13 - CSS - Core - Webpack -
    - From 224313204e323ff46719c01f35986dcfc16eccd3 Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Thu, 31 Mar 2022 23:54:12 +0530 Subject: [PATCH 16/32] home incomp --- Styles/home.css | 223 +++++++++++++++++++++++++++++++++++++++++++++ home.html | 86 +++++++++++++++++ scripts/home.js | 0 scripts/joinnow.js | 2 + thumb (1).webp | Bin 0 -> 12680 bytes thumb (4).webp | Bin 0 -> 10046 bytes thumb.webp | Bin 0 -> 6118 bytes 7 files changed, 311 insertions(+) create mode 100644 Styles/home.css create mode 100644 home.html create mode 100644 scripts/home.js create mode 100644 thumb (1).webp create mode 100644 thumb (4).webp create mode 100644 thumb.webp diff --git a/Styles/home.css b/Styles/home.css new file mode 100644 index 0000000..247daa7 --- /dev/null +++ b/Styles/home.css @@ -0,0 +1,223 @@ +*{ + margin:0; + padding:0; +} +body{ + background-color: #222222; + color: #e6e6e6; + font-family: Open Sans,sans-serif; +} +#clip{ + background-color: #DF5826; + clip-path: polygon(0 0, 100% 0, 100% 6%, 0 2%); + + height:370px; + width:100%; + /* border:5px solid black; */ +} +#head{ + height:50px; + max-width:75%; + border:2px solid blue; + margin: auto; + margin-top: -300px ; +} +#cointainer{ + max-width:75%; + margin:auto; + border: 2px solid green; + margin-top: 20px; + display:flex; + /* flex-wrap: wrap; */ +} +#cointainer>div{ + border:2px solid teal; + +} +#first_parent{ + width:50%; + margin:0 25px 0 0; +} +#second_child{ + width:50%; + margin: 0 0 0 25px; +} +/*.................first_parent.....................*/ +/* ................#continue_watching............... */ + +#continue_watching{ + max-width: 100%; + border:1px solid yellowgreen; + padding:15px 0 15px 0; +} +#continue_watching p{ + font-size: 25px; + +} +#continue_watching p span{ + color:white; +} + +/* ................#welcome............... */ + +#welcome{ + max-width: 100%; + border:1px solid yellowgreen; + margin:15px 0 15px 0; + background-color: black; +} +#welcome>div{ + width:100%; + border:1px solid pink; + margin:5px 0 5px 0; + +} + +/* ................#welcome_one............... */ + +#welcome #welcome_one>h6{ + font-size: 20px; + padding-left:15px; + padding-top: 10px; + line-height: 28px; +} +#welcome #welcome_one>p{ + padding-left:15px; + line-height: 28px; + font-size: 17px; + color:rgb(255, 255, 255); +} +#welcome #welcome_one>#p{ + color:rgb(158, 147, 147); + padding-left:15px; + line-height: 25px; + padding-bottom: 10px; +} + +/* ................#welcome_two............... */ + +#welcome #welcome_two{ + display:flex; + height:80px; + +} +#welcome #welcome_two> .image{ + width:15%; + + border:3px solid red; +} +#welcome #welcome_two> .text{ + width:80%; + border:3px solid red; + margin-left: 15px; +} +#welcome #welcome_two> .image>img{ + height:90%; + width:90%; + margin:4px; +} + +/* ................#welcome_three............... */ + +#welcome #welcome_three{ + display:flex; + height:80px; + +} +#welcome #welcome_three> .image{ + width:15%; + + border:3px solid red; +} +#welcome #welcome_three> .text{ + width:80%; + border:3px solid red; + margin-left: 15px; +} +#welcome #welcome_three> .image>img{ + height:90%; + width:90%; + margin:4px; +} + +/* ................#welcome_three............... */ + +#welcome #welcome_four{ + display:flex; + height:80px; + +} +#welcome #welcome_four> .image{ + width:15%; + + border:3px solid red; +} +#welcome #welcome_four> .text{ + width:80%; + border:3px solid red; + margin-left: 15px; +} +#welcome #welcome_four> .image>img{ + height:90%; + width:90%; + margin:4px; +} + +/* ................#welcome_five............... */ + +#welcome_five{ + padding:30px 0 20px 0; +} +#welcome_five p{ + margin-left: 15px; +} + +/* ................#learning............... */ + +#learning{ + max-width: 100%; + border:1px solid yellowgreen; + padding:15px 0 15px 0; +} +#learning p{ + font-size: 25px; + +} +#learning p span{ + color:red; + font-size: 18px; + margin-left: 120px; +} + + +#beginner{ + max-width: 100%; + border:1px solid yellowgreen; + +} +#beginner #option{ + width:100%; + border: 2px solid blue; + height:50px; + padding:25px 0 35px 0; + +} +#beginner #option #select{ + width:80%; + padding:10px; + border-radius: 10px; + margin-left: 50px; + border: 2px solid rgb(0, 140, 255); +} +#course{ + max-width: 100%; + border:1px solid yellowgreen; + height:50px; + margin:5px 0 5px 0; +} +#fullstack{ + max-width: 100%; + border:1px solid yellowgreen; + height:50px; + margin:5px 0 5px 0; +} \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..1435a8d --- /dev/null +++ b/home.html @@ -0,0 +1,86 @@ + + + + + + + + + + Home + + +
    + + +
    + +
    +
    +

    Continue Watching

    +
    +
    +
    +
    Welcome Susmita Mandal
    +

    You haven't started watching any courses yet... but no worries!

    +

    Below are some great courses to check out:

    +
    + +
    +
    + +
    +
    +

    Testing Web Apps with Cypress

    +

    Steve Kinney

    +
    +
    +
    +
    + +
    +
    +

    AWS For Front-end Engineer,v2

    +

    Steve Kinney

    +
    +
    + +
    +
    +

    Your Learning Path Progress See All

    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + \ No newline at end of file diff --git a/scripts/home.js b/scripts/home.js new file mode 100644 index 0000000..e69de29 diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 594cce1..2757ae9 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -36,6 +36,7 @@ let g=document.getElementById("errcheck") function myFormSubmit(event){ event.preventDefault(); + if ( (document.getElementById("email").value=="")|| @@ -84,6 +85,7 @@ function myFormSubmit(event){ } + else{ var signinobj=[{ diff --git a/thumb (1).webp b/thumb (1).webp new file mode 100644 index 0000000000000000000000000000000000000000..6d6d88c9a097a8967bcba93bdfe6bcf8a5d269ca GIT binary patch literal 12680 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 CVTpSH literal 0 HcmV?d00001 diff --git a/thumb (4).webp b/thumb (4).webp new file mode 100644 index 0000000000000000000000000000000000000000..b88ea9070a4138a7d7e0a3f1f03a8dd7bdb5011a GIT binary patch literal 10046 zcmaJ`Lv$t#kc{=kwlT47+qP}nw!TbkO>8F<+qNdQt^E&s+_!zIOLy0+L)ClTD$)`X z98@46n&Ki#8cJNmH2-1b1CU%$nn%z_P=RELT$$1m(!z2!YpZ%xSWAbG%N=mC+9X9-rQT&OUav`Hs93Cmt%*5Uf_?=6J%&=uv!UnW0hhpKatPM_l2+IcXtfsatvh~eG;7vP0t`@=Q8sT>DpRHuqVqK zG_AzC7USr^@+sj@#M}mY$nII)5MGRJ5Q798yc)f zgfnZ)Fo-u>kThbaLxR77Pp|v*S9=r00~m(`0-o+~$iu$vdHa%8Y`DNxUo8smE+hL) zugpmo!sRa8+$}+l%F|zE01Y_-n4_lR9upunXw<%NlHqR{ExWz-0U&I){x^^?g(^) zA@{eY-Ax{e_aGLXZRC-|zFXiwSXvVH)OUzZI0?{6B+NjE8oQ^bG_X#wp1CPB&;~iY z*~nO&D6ip^_K`#l3-g^#K@~RiI0%d#dI*4u;aAxx+|Km5a1%W#E}f5sbORQ3Cl1RU zks;xwZpaZep7wOp#b(2EeOD~mhlD$CFn}Ra8*`IV6>#cta=5?!-H{CUq|?7TxuFAR+w;EQ08b<3X7(+8lRrHpwfj~@Faa#x7ps&9ddW!7rl+$7N- zEz~qs|8rE20zEFOs6W!!B_@G-F3rUj5W}uG4!c%D9UxLR@`y+3igCK?UyT2uC`xpeI?Y4P= zqnkX0Wt{Vi#?go)&z4W@I7|kmDYzI`r-y*g1TbyOGu55Pn=pU zu?mL_$08uxTHzN%+2XfZG`iAn>|Z;rjxOaq8{`6Cd+?AIHJNO$}g+fF+QXF-x1(9IVa|l7E*H%&2s4@5ne=u65fV=!hs7hVK zeO_?vQsZK53@(oRq}D=H!}5ej!h+a}fW@A>9}|e$!e32Z$B_ykPr_ndAr?RY;!t1E z?&+~drE4nd-zXb~!+|H|gNgR?>%e50!@ChNQb)Ca>40ti!gnw0Fxs1hapXv#0d5~T z5*{QnA&{T{BZXLZiHyF#g#FY=r6tND3--8oY+^ZA@TYR{jx_5G0+L~?J>KP#<0Yo- zz0nOFkB#n_234hzxG!jjq%Iw)=UMK~iBDdNQAOcA1W4wqd*p*=XK!2Ha)#7!A!y4! zBV^PEL%hY-xK`rhzW#~*!%z6Wx@-;G8X*OfVDA)4jKJR0$=`!YcfnKPN^`d%Aim6%Evu?okJ*55vybG zSjX88EOm6ype{s-Vj6k7E)tiAO*-FE&QDEe7@(3E*g-S(gT(j*LS^*5^xz!T1X4hl ztrB)F@Bll_C2ZfN7pCjs4h1KoLVnL|%r7{w_j*~dLl;mDku+gZN74u*Bnk<#zP!;Y zhmLrB3rqDeA^!=l19|YKTmBx}s`GTnP}cdoP{$Fi)QH8;h<`kmbS&;EB)1dIcEj*c z7`$1W7_Xa&-)@@On%P^jJhapQJ7M|w1$8Fo!RF!rZ`1<;`F?B){F&DJ%J@3l zC;GXo@bmSd3XO0)=-rv(6z-Buqe<2Bt2zbcl72*8q{w=1<; zCi4z-%kud*{N4o2m83^k3W7BHY>^`?p1urlQ>@#j(Bawe0>vxc+cFpM&vqU)Rtii>^So&gSgb@a}Vc_|{IK+l}Nl*NLABd8D z99$*o5@gVcaAkB&`WH7NhcSz}8w(QiC`~b6ncGM9*P)tE_4l==CKTMA?-h$rzbS_o z!cuRYsW#Q)U^T!mt;Q;>s{Qhp{AO@gl2jK5MMGB?-3JbcH^Exr+G0CSy1i&A{D2k1?Hgwu z6-X5ClC$_xBDS;KT8#G&>&gHDxItzJ=yM0_ub#X3t2V63=D`x1V&lFeJLmN4x@CdY z5bbJN1HAZv+kucz+l^Fnf!jh9=eV$fdupA_IBEHSy<7Z#L9C6Lc6l%5YnjO9d=Z52 zEY3kSG`yEQh@R+-4a6BYeweVY_7zeLP!CARr(NgKXW+(@vd$!#Kph zFhut;H}jcs%_sIT_*}x|n71~Z*JLV!)<8_2)B|s4eC%;83qN1GFgWlkvA(GI+6XGa z5ISKy+jN$~Z`k5-K8i{20c68n6MGyIT9w6lgxxzgKNu06iJ)xPg1Y=QQd6(L;>xmkxRzjj6!u zH2{!wSj(IDHp_shgV?Ob7IB)NZoTtN(NVJ*M%JjqtQ;PYlHWC~tgOELCYw!%zx!cA zxMg@uO@xIR%<~-TNBRBXQc7Lf7I*qI_>kSE)+c@so;)xMns1vlRWUZHNXzV*?o44X z6wjp+w?&90p=Z(t2Hq_=W41rrx7Sp_zpw9}9(jhV}<~d4o|K9=A`F!Fozn zbuUlD_RAKfzfv{8%zN}yc2SYFH`cp37PfvM3&+ZNL6s9}HLbOx`FxltL&`*6@J1J8 zh7E=xCoHg~>+G>@?n!qLhkQ5Y;g4u#wn4&$y5h8JMH5JVhgCs)JMLRCfS8cWyv#Bpa(@{Wa)*wGnq|KpI&LXu8Od2$)5 zZ}a)nG6GZZawsAk@Lb$VYG`5TAUJuFw(f0qRuZ0t<~Q8mI$W`7LlAoJp) zOZTpFTcQAq;`Y68x&7Nca=>>O4V3xq=*mGRgQ_OP>B{BFCL)zjjWu~{HTm;$6og4* zoBm-;0C><_5IWsHt6Z4$tcaFY-*sxd0(L0LveCN$XWRE>m#P99cyt~x(Zl}F{LD6X z>h*M_L2o3s3A{zdTdq6=vVj|pSH}i(Bf?#z3-y-@A|ce4)@{x2!?G9zifeKWJ{Yy-bJx7V9 zAMkQSGnSTxeeQlr6fdv3VrJ^O&+@+sVsc;jL37_~&ciN~`IMv-v{yI$R#z7>JXq+V zTcQ>>7p!>Nm8T-|6-@j3tCPs!WBPi-spi7Jj1uo~JqW{zaIF|916{qUD(@`;?0`r% zc)4plcyuXsIjSd5usbZgV*Sa7uG$(99B>59JL;|Cz0o~wbiA?HV6~y|&7A%t4o83? zY_pu!kRFUP0mAyVHzRpKdzQ1VC%d41GB+c(n}1{NEhlyE<1uf@-*;FC(7P40ECEcP z%R_pIA1^VE+!t?>bQ2{z86jxZ#jP>b;gVNpUWI&Tm9QT-^<3i9h?VqscZP&zR@1sS zPOg{-KR>MPR<|Yt_j?F9tfaUcD+3prqB7rY>cdN=DgsgAhKAHZ#675nCEMxr`hB4T zs_Cfw18(+)7}R9v){ceBw-RMDehABFcq*xWC%5}i->L+WJsyF8HAMSb*n2H?8cTJG z5yhI0!!k*Z=8*(aVUARodGko_&Wrme9o;F+P=7IB!jMB0pjbMDu~64=3)1J#pZp_( zPy-2rsg(k6-`S2%D#shNoEfMC7p+nOxBOG-ap@J>{EM80H;REI@_%cCZx&ZC z_^8q;_q3bGS72ML)A$bJcZRSllPli`d7|nX1RqRJS{&cGyu!Rxt0mTQYz)WFEuJWy z1Co%E4IWeRhvq6sp}P|}eJHq^sUa3rcpJg&HMSjuo29ng7N-Rj0*fdls%{OLP*UG= z9n~`s%k{JdgbuDHEof29U14MO#rW&T5C9~%=Tc|HC1G~W!`MF#0J5Hlg2N2wV?Yth zfHBTUj{MQA0{9NY6a)nWD@CZjBe;t)!pshP<)FjrnmC9 z5J&MtJlrqa-X3LKk8w`_U?@c0yMV~Ybox}DKaP_3%*ZUrbB+UfQwETe3c;|!XWXa7 zS?}>mLZ#6ubz>4y*TE2#U+fI}l5U*#Xd+)K#*L-#;~J;Tz^@E*xNPauf`l`j`OGdI zmF}`w`pLW~1VjwQMSj>)2Sfu*T_2OO`V$UXmry1j&;DhcR2oTai_&Qw`}4F33NBlE z*DFuUw0n)W?UIhKPFHlLj|_fXQWhBN{AAER(gf_ zo(Q-Ix3c)-u2X{fU?%%R^rh_6BiA&MJTKHLlvs|sv}2_?1-F?oobph$oPwO{8hi4u zcUV+XLX7vpe+S^Yx-}SU0v8;S$p<{#GMhPTIOrTT9NSufnA9)uV*TDy??3{G+HEqP z+K)W)k4IU%_z^8FtV@TX&sG@`li_2oJ6Xp)m?44XMUc zomt~aZ}#n61*?Fr*vZ;DEHV^9Av|GW9QoOR5l@QeGZ<4AB-7!<+vu8J>WR zG;7kMgp6bxRfxEji}x}Zxd>dm;#;Z}RL7g;!#%8@-J=45nZ-;VBJ?W@JTk_tu1|N& zd@2h*#duCfUH{TV23yk6b9Q~w+O*Z_rvuEcNGzwck(kxqZ}KVY=yshF{fIYrV!xvh z5VGc7vQZqJQ!|+qU#xRPK8vrdz_b8f%)L$SG_xyY<;RrizLEXm=#JzH875DRPfF49tC7xg!Vy9+D&+}j z(jF;shS;Nu3k-rU-~A@3(SqK_VMt^5PL(|!BWa5KgMe*}mI)pFh5^ zE|XepO}tq0?-jh(fHI%2HCaXViE)YC^E1Cw;(|idmeTq$rE_Xys}J%YlsPqSQTl-( zh@lHNptD5lZ-T-fSBvaAK7B!oC_xmTA#hDv`juRWA~sXCu*q@1v;tItlYm1C1g96` zduS4ZxJES|8D(d{=|lkRj-B6?6;qJ&s-#1j{hbmRe3Yc>{^!KbXg}WQHn0M5<`43Z zSc~NHqUyDYRQc_=Ddx&?Ljx&i+>x3|rvfjoO5rFXsDV>bhx{tf8nR`DIQSM?uH13>u94cD?IQr>8pwawE`59(b2zv~bB}is znv)bUlwdY;hTWz5R~L7{sV_Bl^Is6#gT-ChFqseS2BzK?dCwy^)MXMw_p(Xiku>ml z21(JwG?o6u&SBpruy+Dm1m`7iV9PhMY5C4Y;D~qL*aGM{;V&>kd8`U#Ut7Ap(}sRj z@5&nHi1YEv;_p4l{&GBk!_T1Ntf{}aRcSpFRI~lihA8W!iXi4vyKRSp4zF-x6y4*k zD8~jZq0B|Lr~@CW%+%i3qEz`Q%0oKCr5GRj)cImz10uj66iZBdRk9v=aA*7=|ZUyBoxk9GM(AsxSMc4}LEMOO({ zn`CCP*d#ZTM0XNXuF~W^4VEoOq%;@qM_&N-=A_Ti;xfe^XOfh#WjZ> zKakWc&~|Tm=#H9iGOGp!M&_H-{l1DvZISG$ZBbdN!6DpBhGGH?AsGo6Lx{Pl8&<2I;iBDdiWC(oY)kHr^K_!STnja+ z)9B4)BYzi>*LTFh#pedpI~Dp0YmO!1$-3ZcqTjTq=}5|Rp5u||L#5EA>)a6R-Uu2S z60-zhzJEr=t<2K3<8P$yItyrsw}Q{$&caEbl@1E-VK-X21EWkGI<+er0EsI!xC*u{ zz1Pb5#Z&?4zoZ!~AvI7KGGXX78q(JF@^C5iffTiM~UF#z8EJ;e70x zk4E)~>+^wHJR-jwlzI@K-I~*9F=lmnT&u54EcN7r2kihXjVSHvuuz>ItY5W?bkr=8 zew3M2QTx()h0laC6xj=Yq~*b_BdaH83Ym|vFET8AP$|dxxXfT%$<@#_g>lFPub-KC z!C&TXr}JXDE->Fz>!YEF^3gGV0p_5!k65T0TE^o|ONMi*1$4`v{xjhyD{78&#tls} z3f$E>%R_zTPj4XaH6=lU2eUp?QS&xCv#{q{a<{-bXRhLMwn=j3l=V%oo2Ecz2huUkBK7eI=Nxy zly5kb0uHtk^6_M5O26M8ElAZ6FNJs+*IQz!bT|F<)%_ejR}IzT@)tLryf*Px4Zi*j zP6(;g{S*x%1nELvbFB{+25V?58&v#jwzjB=_o1J2{%6#HLJXmpyO_Z1FKJi3GPsNwBpZ(7@-AyL=4xPk049Z;vB6eYi@V*s@dH zhqfs-OXr60Bn0C@6#fAE3gQkUV)N+^K8UzmEw==W#Up$&Hb5gI^!@ax9fj8?f@T7(+ zFGqPv;ckET6eBYQb}nOAi<-?e=(Lw>wpm$4g`5e4IPrLF;0TN1m??4IY8DPhb>GbYE!ggzWu8f&5Vxq64#|=~W{*o4_}mSlh;kIx1TfS&R@vaWLrOnN1;tE%M-fg(fD#iQo zwu!K=jD-D*L|vXjCJxV}LkigPR`@<`Jmlt?Y<#?4u!Pb>>-(Q(5Tz!TK8B8n@;@&t?A?vBhx;V0%c* zC%e`bn3#w3M0=Wrf)C%3PF<9=oab_a7pIa#)zo$a2>|ZLFt8xHo{*y;x6dB5IN>wd zlTfjd`^GX64P%o#;tlA<$y1SFh1~`829?fgR9WA;GXRyTa=+(1b=_3JeqY6>@ z4^s(8<3dzPf?bSpBAooH#(S`Q*7s=I3I4vdWi|_LWoD8B*m7tno~HdoBvA}Hs-2E% zY0T+q#SHfveR5i|7xh@R;GKA!O8X7YqP>Ssar*eYdtDlcI9#Bl@e46WX+LTH-m7unF?JN|tZkZda$Fc5Z&tqFKzuqC>VJ)iuv& z!{@Ij^=qMLUU2GQvqJ)meAGh^wj|j|DNd`jnp`ZJnCSRW(-0fO^UEj0fNEluSHHa( zLZe2JSbO_$HDwO%m#4iP?^L}U)P(gY-sRHY$6;2$7>z|Az6Dmq?MRu{8c zsZ)__cuO(8$YzS-sgjDrCu|-$NQ&ZS)pMNqqopOhmL))en%d{CxWQ8D(yO#8#VI$> z-+HzlVossO>%u&1Vk+5wKu3@fC_C4>le0Po&F4X>p9;_9iOJ zXW``!xYyQy0Iop4F23Iff1C8$K7VtT)unjXZZ@3ufY2s?(BQB>6Dx9dJ>Y8GAB=}9 z;qqu7vh2vQ#1I}EU^tcnH`XVp?tOY+B%EW}BEFkICV`y|^-LBxKCL!lC6~8I7ipT5 z`|?OkgfX2#qfPZCLzUWrj>iurKTojoE; zNX01GXJ5i&gw%49cN5noxVszvpWG&_XQ_ijkEj>merpc@eyP#?+Rz;&zinP3`LjI7 zf;h(kf$c*35M-4Ty!-23G&fl!+q2k{ZqK{8uQ3kzq|jR%6_N$bK)9RF;B-AyIhgZ6 z2AlA&TWO#KwfFBl+uoe2izExwgO3DaHm6@MKZWZ#DuHv|Fp=b`Xz8DlSV>sZbPlJP z&%hnUqD)a&L0X~sPpi3pBqavgGNU*RH z31x2lL9gi?qe;m)PkN;_hQBkI2lM~qy+Sb0;C(`L9{J&({u};B*gN%e^&haWo9{Wl zIy{8WSj>fgp!vl5k8ir=tKYY8Mjegt0{mzA_xWFDm@cO$s?_U$W21X6^VEOs=HK`q zH4wQLU(COmV#gY9!drsrW$ze_*b(2uNz2G;eknd6BtS@R9H?XO3VDqP{eWOQp-*E` zQ8hv~hHVVm8G(BG6$&hXQ$A?2rVg#4u=SZQ$De;h*N| z8{X_~y8-c~6Jv@+7$4ZsGP{$(jxTst{-g;&8w)$OHpEGGUXdcL27XnJ?Q=yOs!p50 zWDJCeBQ|(Nl`HuF`c%*JeVGp#%OKXgpKX`at=Co!f-T-e`-DUmH#~IQ%({9j#w_}(e1{B<|z%z{%EJh}~ zA}*y&iyp-%Ye!B_n1YEb<#xuWaiL8=Wu#6%h+M0>6uq9T-^f%@@o>fiN(KR%LL&ZC zH>cU1*5l&)8y6zL%Km3jzMm4tX4={O2>pu+yp^knWv)2k?W6F&@??`{wSPVuz`^g* zDMrM?7VUQ7{ZZ-a{TZqceOQY%kU2(;vtAMYI!UxL5~St|*Nv|QZOu9bYc_nRmVD_9;|xyqh7|ku zz%;GQO2)=gQA=pw4I4u?eRRFrFPz0p8T`oo_roC}0Ir_2Z6-5FvC6U zvikDC=!9uzJSsuUI6~hrmD5y)+2#bDn`Qm1$XlT}uNO!Vu7^JoIA7&^SthmYf2tpK z2!0eUr3}fV5RNGi=5ID8b!)ArbsFz<=bn7YsY8(#s%ZSc!$iNRHdYX8%lY}u@<~=fU&Dm1Y_V0mZFuWHt0Cp} z`Iqwg6EF_2%s@o-RWoKYDI*;)&C=F=aICJ&@pzzu(*RU|xyN%gebt`HaX< zb-e#f#qMgoN~c=nu(k$reuCx&8Dmz1R`BrU;aT0mE3V&}Jb5XL3IZ(&gnjQZv}&bs z5<)0@<_r{k21ryM*FXEbjm@How^Mj9O7FrnIV8XLZnrkE+M^vq85Dj3i3DA@Jl{E?(75wl{dK!_d zy0vRsWR5YWTOe&WmJIf!7f-*#toJ{RL-=L0b9qb8MLgVrdq0E-|pM>i_bcMgzZ)4WK z?l3@K(^)h)Ky(O*0_{XC{q}_637Si3{44ow025|<*0<$1?o7Ir-Y>ZuBWnX>?1G4Y zml@au0$5Qe3(c%Wq@a1U4A9Y!2&?LZi(e|sDn2i68<8Ek9ocwA1%Hy(cYAcYz2esl zf}*DOUwaE~W>^My*!+yc28iSM>3dg0N`x1)l9VrO0cmxsjft0o5j*<6njSbyI#QGR zfQI-9FjfIJ>o(Rp_hGCp8^$yo9wNTEmxfUG38FKx$&Ge&+i7Hafn(JR4C&htMhFq$ zUg34|`IzVO2cUyqUeyxL`fNso25}x9H2DwpQ=vj1rwc!!ozIj)53NplSH5-edYXZ; zU*+5J+PLoI%HJm<|8G4?77~0BeIRcOc$xFZP^wh>H$Lu=y>&J>HbXXo5WU<<%}A7& zue47J2D()IT9GIF2KmlYC%of`N*OIo8)y8o%+?+lbrclN=#k~vs6uPnSTs=TX9WTZ zQP3Rq%yBv18@g|pRzRi$ZwoEjx8amYTnKI|7_LgIMv1lH3fKP}LpZyeHeqyHcdNZf z^>BX(AEREB%VBH>Yqed;`yIPXiBQBsa$>!{td~w}HD6F^p!GLf$(dSn#Hi#(t25$-3E+5u zp+#+IpNmvKs8l$Ta~vT@?o>sAz5tf3%h04KE@PWCcyxBVa{OVU3ep4rg%4I@h~)k| z>EsKyAA4g+&=WUrF z%Vj0YTCCZAyON)kI);2V{=k%hx}}UokoZnh(qA#1{p{Y14Pi=+nejZ;`YY_7SodDL z=~HEi#CWoh|6#8v82gN?oa!0P^*!vqM;myAV>`FHq8i{TYb<9kk!?6UCd5}`VAA)Ry6_Mpc^a1Ph7RJJj%0Y9sD~LiCd!MV% z{lr#U;6IH{a!8berj~H#O24ruf{stF8Gi>5rnT2XD%71@Jczu?&d-#jrywdfsFK|- z*u>1~_WeQOCl+kSn5s=CjFfCfsK z2`U3*+#LzSevv6~-b#7W^{}#MYKBAe3#Z=rDn1_ku#bUj&x~bB24K4wAPVFfnhrV@9rTwI|sXPUxav;w%RCP|c_9z$ihL&8t#$vz4d3chkTS$G*(d&^Zk z@s}Wo2zso9>0dOsZ|YV3f#d~R$N0mV%1|n}P_s>3{?2!~%_fx+s1T|auoiX*k|0;@X8DkYyye@9&=<{G6n>;yOsUtySYrKVG_MccM zxhdAzNol{J17fl8q}#7{Y?=T>8`q%If*{Cm)2nFX=Md`*LOg`_&fh#k9E!zwBy%i#us@Tn6&yUyo#E zsumT&Z(wHF6Ribht*%+jF(@Cx;hkKL;i!1(kS&d~dMQ<4;wj---~qsVR@g#;J>1Pb zfo;=yFzWq$5@}^Ka9DzXNxFb5Y?D2oQ~vZSs^y5+N?}kD_AH6$fbtH=t30+_ZO++U zW5Qp%UPVqqpNQ_sWx=(p`oA}Q4?6HT;zD_AZAE zQQq|o*nv-<ZP=|4ZtE*vQ?#byjJl_eU}b56fJePVK#I zk3xIoT%g8M)|Y$q*Rc`Qhh0v=W~P-{C;izK26ytQb|=r-dz9?Qfz)#+hvjK+CVL=+sLR9BO}j~JtK6l+vXADT6pVz087$l+eyKeQ)D zJ35j>JPz3ci@`eN@tKjF)V5q|7Jn?7e-Nuuq7w4nr)jVUX0K?DAmv ziNUt`La@b$^y!8IZ@P@S7N~BL9t5SK1i5QS}Xy5O}Zh>MI(Cq`!xHQ8LJ=Ul~3*B>JX`M0u|B%ZWkT!FsxW$ zq0pa__X_y^E;uOQ#TLG&4@Vm~R0w*~6NRc%PhO^EN92ftC}3 zNb-7n#aL-iU@QN*6*gyvr8N9HR!B=79XDnHxSJS-36vkede{s3yGVbEiVkC@-X56m+*&G0K1DTF$y0;W@B z-vqmD=ofZm(@w!Cir^fFN)c%B%F^f$R4f0oX(ormowzaBR7FPe@llvsRuBuQ;FQ7o#_`ebs7lZv$|7 zO4ezjgeuI;(5lcz^}+C?!nEQi3y+GaPyLkma~FTVu&tQi$O-#}f2WH(N}cGycpH&+ zIERpb!-{p$om6Y}!DCLZ*Hjz@VvO|ujU^=XzR*}z+U>|;uwW0h-x|Rt4^xNSh^a`z z*Dkw7V=f^I3Iu0l-ylTIgY~c$^opsluqUoXj7m`59^-fc^W;Oj}jRr3x5+s&^tCFVs0cl|Cd;bg`aI`=p5E|F9E-m5ZLv=~6n z-eG3Os4J_P;jcQl0U!fd+Y1Yx7om=zrO4-Ekq)DTOONlolASPv6CIk$U9 zKeShKJW@&_FOKTV;mnnu=ySTFqqBzYp)A$`Or6s~Qxd!&vh$(aF9z!_%6r0i6QOx= z6qMr)9L^W7a>9(3e#>+F5S^02hP@N0(ggKZr8*wC61^DGHU)kPO{(lPV?<|%@|Q4B z)5zn6ELuT@>&?}5zyTSTCwBc+*^6ze^hBnjg^q{i>6Mm#(_PfW-TT~F!?(33*Y44} z5~qA>Gie$)P>+0j`B*&=gH%e=zdxfh0snrbDcgHHE)v;TpuXF}+VtlWDY4CC%&2%3 z{zgsgJ)e>RVPcc%U{UT_<9exXZNCs}nXT6B z`}P*{Ga)>Z`}&O@Oy02(Gzm7A6U@N>89QcrU|qqX+PYr}KY>a3k=C-j z_h1bPbP5EQA?D>A&fg@Bk#>)wb1dS1oTvhZdFYX*LP7jxvz15AssrY)$+`c zSB2cR0MGYa3V$tL{dC$TO%zNt1vg&N_UXB`L*Zqh*WTFGK2Xc?*!!IZm|#)d89+o( z0umE1NY{(te&9=Nb|zrFAT`-OMU@){o{--PuEUC3Q-FEg1%DXk8ZH&7fFP914hOK7 zv$onS{>g`P$usyx6TIAWOk#S8Xj5n6`)bIb`T+AN02eBDi=UVykd6y28Yl6ETj5}h$1a;B7y)Fn0|t1SJdoLV&(W+=%~i`-82sETlkeq7H{ zb}XnydLUm_WDiYd7WuoJhLuEDb*{<3@VyC9OYL}7P-Xc9V^r(Xmb>M<7O^OKUP|Or z0y09AvZfG35&fUi8%Z=|vs(f0MwV+)8aZiGO-H=$MtN zC&t+ybW|{`aceyi?&lwvJ1W99xbM3Sk8IX77{1^(C&`2{3L!iyh}4o_X^qJNaD3>R s2Vw+G0$aF-WvW?x)}WgYyr%~e3gIu)x(oy{T&GQ#Fy&=VqU-zs010yVp8x;= literal 0 HcmV?d00001 From f5dcfe9c6376664902f69e68dce9afe45ca55999 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Fri, 1 Apr 2022 00:58:42 +0530 Subject: [PATCH 17/32] merge susmita branch --- Login.html | 123 +++------------------- components/forgot-password.js | 20 ++++ components/login.js | 25 +++++ components/navbar.js | 2 +- forgot-password.html | 33 ++++++ icon1.html | 121 ++++++++++++++------- learn.html | 2 - scripts/forgot-password.js | 60 +++++++++++ scripts/login-page.js | 68 ++++++++++++ styles/footer.css | 192 +++++++++++++++++----------------- styles/login.css | 135 ++++++++++++++++++++++++ 11 files changed, 532 insertions(+), 249 deletions(-) create mode 100644 components/forgot-password.js create mode 100644 components/login.js create mode 100644 forgot-password.html create mode 100644 scripts/forgot-password.js create mode 100644 scripts/login-page.js create mode 100644 styles/login.css diff --git a/Login.html b/Login.html index efad889..fc8ac20 100644 --- a/Login.html +++ b/Login.html @@ -4,122 +4,29 @@ - Document + + Log In to Frontend Masters + - +
    -
    -
    -
    -
    -
    -
    - Remember me
    - - Forgot your password? -
    -
    + + + + + + - + + diff --git a/icon1.html b/icon1.html index 24d81c5..aff9814 100644 --- a/icon1.html +++ b/icon1.html @@ -1,39 +1,75 @@ - - - - + + + + Document - - - - + + + + - - - - + rel="stylesheet" + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" + integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" + crossorigin="anonymous" + referrerpolicy="no-referrer" + /> + + +
    - - - -
    + + + + + +
    - + + + + + + + -

    Core Coursework

    -

    (take these in order)

    + c11.193-17.731,34.606-23.093,52.4-12C305.092,29.148,310.453,52.56,299.361,70.354z" + > + +

    Core Coursework

    +

    (take these in order)

    - + - + diff --git a/learn.html b/learn.html index 2fa3c39..893c111 100644 --- a/learn.html +++ b/learn.html @@ -12,7 +12,6 @@ Paths to Learning JavaScript, React, and More Skills You Need. - <<<<<<< HEAD @@ -20,7 +19,6 @@ - >>>>>>> muskan { + event.preventDefault(); + let email = document.querySelector("#email").value; + let new_pass = document.querySelector("#new-pass").value; + let success = false; + for (let i = 0; i < data.length; i++) { + let el = data[i]; + if (el.email === email) { + el.password = new_pass; + success = true; + break; + } + } + let alert_box = document.querySelector(".alert-msg"); + if (success) { + // localStorage.setItem("logged_user", JSON.stringify(logged_user)); + console.log(data); + } else { + alert_box.innerText = "Email doesn't Exist in our database. Try again"; + alert_box.classList.add("active-alert"); + } +}; + +forgot_password_form.addEventListener("submit", resetPassword); diff --git a/scripts/login-page.js b/scripts/login-page.js new file mode 100644 index 0000000..cca5b5a --- /dev/null +++ b/scripts/login-page.js @@ -0,0 +1,68 @@ +import login from "../components/login.js"; +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +let login_container = document.querySelector(".login-container"); +login_container.innerHTML = login(); + +document.querySelector(".header").innerHTML = navbar(); + +document.querySelector("#footer").innerHTML = footer(); + +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); + +let data = [ + { + name: "Aniket", + email: "aniket@gmail.com", + password: "test", + }, + { + name: "Miles", + email: "aniket0123@gmail.com", + password: "test", + }, + { + name: "Haresh", + email: "haresh2910@gmail.com", + password: "test", + }, + { + name: "Krunal", + email: "krunal3103@gmail.com", + password: "test", + }, +]; + +let login_form = document.querySelector("#login-form"); + +const loginUser = () => { + event.preventDefault(); + let regesiterData = JSON.parse(localStorage.getItem("registerData")) || []; + let email = document.querySelector("#email").value; + let password = document.querySelector("#password").value; + // if + let success = false; + let logged_user = null; + for (let i = 0; i < data.length; i++) { + let el = data[i]; + if (el.email === email && el.password == password) { + success = true; + logged_user = el; + break; + } + } + let alert_box = document.querySelector(".alert-msg"); + if (success) { + localStorage.setItem("logged_user", JSON.stringify(logged_user)); + } else { + alert_box.innerText = "That wasn't correct. Try again?"; + alert_box.classList.add("active-alert"); + } +}; + +login_form.addEventListener("submit", loginUser); diff --git a/styles/footer.css b/styles/footer.css index 0e48cc4..02e4487 100644 --- a/styles/footer.css +++ b/styles/footer.css @@ -1,125 +1,121 @@ #footer { - height: 300px; - width: 100%; - background-color:black; - padding: 35px; - box-sizing: border-box; - + height: 300px; + width: 100%; + background-color: black; + padding: 35px; + box-sizing: border-box; } #footer #footer1 { - display: flex; - margin-left: 30px; - + display: flex; + margin-left: 30px; } #footer #footer1 ul { -list-style-type: none; -float: left; -display: flex; -margin-top: 18px; -margin-left: 50px; + list-style-type: none; + float: left; + display: flex; + margin-top: 18px; + margin-left: 50px; } #footer #footer1 ul li { - width: auto; - margin-left: 25px; + width: auto; + margin-left: 25px; } -#footer a{ -text-decoration: none; -color: rgb(177, 165, 165); +#footer a { + text-decoration: none; + color: rgb(177, 165, 165); } #footer a:hover { - color: #eff; + color: #eff; } #footer .logo { - height: 40px; - width: 240px; - background-image: url("https://static.frontendmasters.com/assets/fm/js/static/frontendmasters.e1e10b58c1.svg"); + height: 40px; + width: 240px; + background-image: url("https://static.frontendmasters.com/assets/fm/js/static/frontendmasters.e1e10b58c1.svg"); } #footer #footer2 { - display: flex; - margin-left: 22px; - margin-top: 15px; - + display: flex; + margin-left: 22px; + margin-top: 15px; } #footer #footer2 img { - height: 72px; - width: 170px; + height: 72px; + width: 170px; } #footer #footer2 #apple { - height: 50px; - width: 160px; - margin-top:15px; - margin-right: 20px; + height: 50px; + width: 160px; + margin-top: 15px; + margin-right: 20px; } -#footer #footer3, #footer #footer4 { - display: flex; - justify-content: space-between; - margin-left: 27px; - color: #8a8a8a; - margin-right: 30px; - margin-top: 20px; +#footer #footer3, +#footer #footer4 { + display: flex; + justify-content: space-between; + margin-left: 27px; + color: #8a8a8a; + margin-right: 30px; + margin-top: 20px; } #footer #footer3 div:last-child a { - text-decoration: underline; - color: #c94f17; + text-decoration: underline; + color: #c94f17; } #footer #footer3 i { -margin-right: 10px; -/* border-radius: 10%; */ + margin-right: 10px; + /* border-radius: 10%; */ } -@media all and (max-width:768px) and (min-width:381px){ - - #footer #footer1 { - flex-direction: column; - - } - #footer #footer1 ul{ - margin-left:-20px; - } - #footer #footer2 #apple { - margin-top: 10px; - } - #footer #footer3, #footer #footer4 { - flex-direction: column; - } - #footer { - height: 400px; - padding-left: 25px; - padding-right: 25px; - } - #footer #footer3 > div:last-child{ - margin-top: 20px; - } - #footer #footer4 > p:last-child{ - margin-top: 20px; - } - +@media all and (max-width: 768px) and (min-width: 381px) { + #footer #footer1 { + flex-direction: column; + } + #footer #footer1 ul { + margin-left: -20px; + } + #footer #footer2 #apple { + margin-top: 10px; + } + #footer #footer3, + #footer #footer4 { + flex-direction: column; + } + #footer { + height: 400px; + padding-left: 25px; + padding-right: 25px; + } + #footer #footer3 > div:last-child { + margin-top: 20px; + } + #footer #footer4 > p:last-child { + margin-top: 20px; + } } -@media all and (min-width:50px) and (max-width:380px){ - - #footer #footer1 { - flex-direction: column; - - } - #footer #footer1 ul{ - /* margin-left:-20px; +@media all and (min-width: 50px) and (max-width: 380px) { + #footer #footer1 { + flex-direction: column; + } + #footer #footer1 ul { + /* margin-left:-20px; */ - display: none; - } - #footer #footer2 #apple { - margin-top: 10px; - } - #footer #footer3, #footer #footer4 , #footer #footer2{ - flex-direction: column; - } - #footer { - height: 500px; - padding-left: 25px; - padding-right: 25px; - } - #footer #footer3 > div:last-child{ - margin-top: 20px; - } - #footer #footer4 > p:last-child{ - margin-top: 20px; - } + display: none; + } + #footer #footer2 #apple { + margin-top: 10px; + } + #footer #footer3, + #footer #footer4, + #footer #footer2 { + flex-direction: column; + } + #footer { + height: 500px; + padding-left: 25px; + padding-right: 25px; + } + #footer #footer3 > div:last-child { + margin-top: 20px; + } + #footer #footer4 > p:last-child { + margin-top: 20px; + } } diff --git a/styles/login.css b/styles/login.css new file mode 100644 index 0000000..a9cc103 --- /dev/null +++ b/styles/login.css @@ -0,0 +1,135 @@ +* { + margin: 0; + padding: 0; + font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji; + font-family: Open Sans, sans-serif; +} + +.login-container, +.forgot-password-container { + width: 100%; + background-color: #222222; +} + +.login-wrap, +.forgot-wrap { + max-width: 600px; + margin: auto; + padding: 30px; +} + +.login-wrap form, +.forgot-wrap form { + width: 91%; + display: flex; + flex-direction: column; + font-size: 16px; + line-height: 1.5; + color: #fff; +} +.vertical-margin { + display: flex; + flex-direction: column; + margin: 20px 0; +} +.vertical-margin label { + margin-bottom: 5px; +} + +.vertical-margin input { + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: inset 0 1px 3px #ddd; + color: #222; + display: block; + font-family: inherit; + padding: 8px 10px; + font-size: 17px; + width: 100%; +} +.vertical-margin input:focus { + border-color: #e66225; + outline: 0; +} +.checkbox-container, +.submit-container { + display: flex; + align-items: center; +} +.checkbox-container input[type="checkbox"] { + margin-right: 10px; + transform: scale(1.33); +} +.submit-container { + margin-top: 20px; + flex-wrap: wrap; +} +.alert-msg { + background: rgba(255, 255, 255, 0.2); + border: 1px solid #8a8a8a; + border-radius: 5px; + margin: 20px 0; + padding: 5px 10px; + border-color: #e66225; + color: #e66225; + display: none; +} +.alert-msg.active-alert { + display: block; +} + +.submit-container input[type="submit"] { + font-size: 19px; + padding: 20px 30px; + background: #c02d28; + border: none; + box-shadow: none; + max-width: 105px; + border: none; + border-radius: 40px; + color: #fff; + cursor: pointer; + line-height: 1.25; + text-align: center; + vertical-align: middle; + margin-right: 20px; + transition: background 0.2s ease; +} + +.f-submit-container input[type="submit"] { + font-size: 19px; + padding: 20px 30px; + background: #c02d28; + border: none; + box-shadow: none; + max-width: 202px; + border: none; + border-radius: 40px; + color: #fff; + cursor: pointer; + line-height: 1.25; + text-align: center; + vertical-align: middle; + margin-right: 20px; + transition: background 0.2s ease; +} +.f-submit-container input[type="submit"]:hover { + background: #d43530; +} +.submit-container input[type="submit"]:hover { + background: #d43530; +} +.submit-container a { + color: #dd625e; + transition: color 0.2s ease; +} +.submit-container a:hover { + color: #e58480; +} + +@media all and (min-width: 50px) and (max-width: 380px) { + .submit-container input[type="submit"] { + margin-bottom: 20px; + } +} From 40cf086e365567d07113a768d88c0d495b3075d1 Mon Sep 17 00:00:00 2001 From: Aniket Solanki Date: Fri, 1 Apr 2022 04:29:20 +0530 Subject: [PATCH 18/32] Fix join now page update header --- Styles/joinnow.css | 667 +++++++++++----------------------------- account.html | 21 ++ components/navbar.js | 64 +++- joinnow.html | 339 ++++++++------------ scripts/account-page.js | 15 + scripts/index.js | 8 +- scripts/joinnow.js | 189 ++++-------- scripts/login-page.js | 30 +- styles/main.css | 7 + styles/nav.css | 19 ++ 10 files changed, 502 insertions(+), 857 deletions(-) create mode 100644 account.html create mode 100644 scripts/account-page.js diff --git a/Styles/joinnow.css b/Styles/joinnow.css index c538b10..a9f7167 100644 --- a/Styles/joinnow.css +++ b/Styles/joinnow.css @@ -1,554 +1,251 @@ * { - margin: 0px; - padding: 0px; - /* background-color: #2b2727; */ - font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; + font-family: Open Sans, sans-serif; + font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji; } -#text1 { - margin-top: -320px; - height: 10px; - width: 99.7%; +.join-now-container { + width: 100%; + background-color: #222222; + color: #fff; } -#text1 > h1 { - color: #e6e6e6; - font-size: 48px; - font-weight: 600; - text-align: center; +.join-head { + max-width: 1200px; + margin: auto; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-bottom: 20px; } -#text2 { - margin-top: 60px; - height: 60px; - width: 100%; - /* border:2px solid lime */ +.join-head h1 { + font-size: 46px; + margin: 0 20px 10px; } -#text2 > h3 { - color: #e6e6e6; - font-size: 39px; - font-weight: 400; - text-align: center; - margin-top: 8px; +.join-head h2 { + font-size: 31px; + margin: 0 20px 10px; } -#logo { - margin-top: 30px; - height: 110px; - width: 100%; - /* border:2px solid lime; */ + +.lang-logo-wrap { + max-width: 1200px; + margin: auto; + padding: 0 40px; display: flex; justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-top: 20px; } -#logo > div { - /* border:2px solid white; */ +.lang-logo-wrap > .lang-logo { height: 80px; width: 80px; - border-radius: 6px; - overflow: hidden; - margin: 4px 15px 15px 0; - margin-right: 20px; + margin: 20px; } -#logo > div > img { +.lang-logo-wrap > .lang-logo > img { width: 100%; height: 100%; object-fit: contain; } - -#text3 { - margin: 10px 0; - height: 50px; - width: 100%; - /* border:2px solid lime */ -} -#text3 > p { - font-size: 16px; - color: white; +.goto { + padding-top: 10px; text-align: center; - margin-top: 30px; - /* word-spacing: 3px; */ - letter-spacing: 1px; + margin: 20px 0; } -#text3 > p > span > a { - color: red; - letter-spacing: 1px; +.goto a { + color: #dd625e; } -#box { - height: 200px; - width: 100%; - /* border:2px solid lime; */ + +.subscriptions { + max-width: 1200px; + margin: auto; + padding: 40px; display: flex; justify-content: center; + flex-wrap: wrap; + gap: 40px; } -#box > div { - /* border:2px solid blue; */ - height: 100%; - width: 18%; - margin: 0 13px; - background: #111; - border-top: 7px solid #3e3e3e; - box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%); +.sub-box { + max-width: 210px; + display: flex; + flex-direction: column; + border-top: 8px solid #3e3e3e; + flex-wrap: wrap; + padding: 20px; + padding-bottom: 40px; + background-color: #111111; cursor: pointer; - position: relative; + font-weight: bold; } -#box > div:hover, -#box > div:hover > .head, -#box > div:hover > .head > .name, -#box > div:hover > .head > .name > p, -#box > div:hover > .para, -#box > div:hover > .para > p { - background: rgb(29 27 27); -} -/* #box > div > .head, -.para:hover { - background: rgba(17, 17, 17, 0.534); -} */ -#box > div > .head { - width: 94%; - height: 45px; - /* border:1px solid white; */ - margin: 8px; - background: #111; +.sub-box:hover { + background-color: #1a1a1a; +} + +.sub-head { display: flex; justify-content: space-between; -} -#box > div > .head > .name { - height: 100%; - width: auto; - background: #111; - /* border:1px solid yellow; */ -} -#box > div > .head > .name > p { - background: #111; - color: white; - font-size: 20px; - margin: 10px 0 0 5px; - text-align: center; -} -#box > div > .head > .price { - height: 70%; - width: 30%; - /* border:1px solid yellow; */ - margin: 4px -20px 0 0; - background-color: rgba(179, 75, 37, 0.993); - border-radius: 5px; -} -#box > div > .head > .price > p { - background-color: rgba(179, 75, 37, 0.993); - color: white; - font-size: 20px; - text-align: right; - margin: 7px 7px 0 0; + margin-bottom: 20px; + position: relative; } -#box > div > .para > p { - background-color: #111; - color: white; - font-size: 20px; - text-align: left; - padding: 5px 15px; - line-height: 25px; +.sub-price { + background: #d85519; + padding: 4px 16px; + border-radius: 4px; + position: absolute; + right: -32px; + top: -4px; + box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%); } - - - -#twitter { - height: auto; - width: 100%; - display: flex; - justify-content: center; - align-items: center; +.sub-box.active { + transform: scale(1.091); + background-color: #90221e; + border-top: 8px solid #c02d28; + box-shadow: 0 5px 10px 0 rgb(0 0 0 / 20%); } -#twitter > div { - width: 23%; - margin: 45px 15px 10px 15px; - border-radius: 10px; - background: #fff; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - padding: 10px; +.registration-container { + background: #111; + box-shadow: 0 5px 10px 0 rgb(0 0 0 / 40%); + margin-bottom: 30px; + margin: auto; + margin-top: 20px; + padding: 30px 30px 20px; + max-width: 600px; + padding-top: 40px; + padding-bottom: 40px; } -#twitter > .twit > .one { - /* border:1px solid green; */ - height: 85px; - width: 99.6%; - background: #fff; +.registration-container form { + width: 91%; display: flex; - justify-content: space-between; -} -#twitter > .twit > .one > .square { - height: 100%; - width: 22%; - /* border:1px solid red; */ - background: #fff; + flex-direction: column; + font-size: 16px; + line-height: 1.5; + color: #fff; } -#twitter > .twit > .one > .rec { - height: 100%; - width: 60%; - /* border:1px solid blue; */ - background: #fff; -} -#twitter > .twit > .one > .rec > h5 { - color: black; - background: #fff; - font-size: 20px; - margin: 16px 0 0 15px; -} -#twitter > .twit > .one > .rec > p { - color: #8a8a8a; - background: #fff; - margin-left: 10px; - line-height: 22px; - font-size: 18px; -} -#twitter > .twit > .one > .square > #pic { - /* border:1px solid black; */ - height: 80%; - width: 80%; - margin: 6px 0 0 6px; - border-radius: 50%; - background: #fff; -} -#twitter > .twit > .one > .square > #pic > img { - height: 100%; - width: 100%; - border-radius: 50%; +.registration-container h2 { + margin-bottom: 20px; } -#twitter > .twit > .one > .square > #twit-logo { - height: 60%; - width: 60%; - margin-left: 25px; +.vertical-margin { + display: flex; + flex-direction: column; + margin-bottom: 20px; } -#twitter > .twit > .two { - width: 99.3%; - height: auto; - /* border:2px solid teal; */ - background: #fff; +.vertical-margin label { + margin-bottom: 5px; } -#twitter > .twit > .two > p { - font-size: 17px; - background: #fff; + +.vertical-margin input, +.vertical-margin select { + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: inset 0 1px 3px #ddd; color: #222; - text-align: left; - padding: 15px; - line-height: 22px; -} -#twitter > .twit > .two > p > span { + display: block; + font-family: inherit; + padding: 8px 10px; font-size: 17px; - background: #fff; - color: rgb(70, 161, 161); - text-align: left; -} -#twitter > .twit > .three { - width: 90%; - height: auto; - /* border:2px solid blue; */ - background: #fff; - margin: 5px; -} -#twitter > .twit > .three > p { - font-size: 18px; - background: #fff; - color: #8a8a8a; -} -#twitter > .twit > .three > hr { - margin-bottom: 10px; - background: #fff; - color: #8a8a8a; -} - - -#question { - height: 100px; width: 100%; - /* border:2px solid lime */ } -#question > #p { - color: white; - text-align: center; - font-size: 36px; - margin-top: 15px; - margin-bottom: 13px; -} -#question > p { - color: white; - text-align: center; - font-size: 22px; +.vertical-margin select { + width: 104%; } -#question > p > span > a { - color: red; +.vertical-margin input:focus { + border-color: #e66225; + outline: 0; } -/* form */ - -#form { - width: 41%; - /* border:2px solid lime; */ - margin: 30px auto; -} -#form > form { - background: #111; - box-shadow: 0 5px 10px 0 rgb(0 0 0 / 40%); - /* border:2px solid pink; */ - width: 100%; - margin: 10px auto; - padding: 30px; -} -#form > form > h2 { - background: #111; - color: white; - text-align: left; - margin-bottom: 12px; - font-size: 30px; -} -#form > form > #input { - background-color: white; - border-radius: 7px; - border: none; -} -#form > form > input { - background-color: white; - border-radius: 7px; - width: 97%; - padding: 7px 12px; - font-size: 17px; - margin: 0px; - margin-bottom: 12px; - outline: none; - border: none; -} -#form .form-div { +.horizontal { display: flex; - background-color: #111; } -#form .form-div > div { - background-color: #111; +.horizontal > div { width: 50%; } -#form .form-div > div:first-child { - margin-right: 46px; -} -#form .form-div > div > p { - background-color: #111; - color: #fff; - margin-bottom: 12px; -} -#form .form-div > div > input { - background-color: white; - border-radius: 7px; - width: 92%; - padding: 7px 12px; - font-size: 17px; - margin: 0px; - margin-bottom: 12px; - outline: none; - border: none; +.horizontal > div:first-child { + margin-right: 41px; } -#form > form > p { - background: #111; - color: white; - margin-bottom: 12px; - font-size: 19px; -} -#form > form > p > span { - background: #111; - color: white; - margin: 25px 0 0 208px; - font-size: 19px; -} -#form > form > .g-recaptcha { - margin: 20px 0; - width: 46%; - height: 80px; -} -#form > form > #terms { - /* border:2px solid white; */ - background-color: #2b2727; - color: rgba(255, 255, 255, 0.705); +.card { + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: inset 0 1px 3px #ddd; + color: #222; + display: block; + font-family: inherit; + padding: 20px 10px; + font-size: 17px; width: 100%; - margin: 20px 0; - padding: 10px 6px; -} -#form > form > #terms > p { - background-color: #2b2727; - font-size: 15px; -} -#form > form > #terms > p > a { - color: rgba(255, 0, 0, 0.61); - background-color: #2b2727; -} -#form > form > #button { - height: 70px; - width: 200px; - border-radius: 40px; - background-color: #c02d28; - border: none; - font-size: 22px; - color: white; + background-color: #fff; + position: relative; } -#box > .active { - background-color: #90221e; -} -#box > .active > div { - background-color: #90221e; -} -#box > .active > div > div.name { - background-color: #90221e; -} -#box > .active > div > div.name > p { - background-color: #90221e; -} -#box > .active > div > p { - background-color: #90221e; +.card:hover { + border-color: #e66225; + outline: 0; } -#box > div.active:hover, -#box > div.active:hover > .head, -#box > div.active:hover > .head > .name, -#box > div.active:hover > .head > .name > p, -#box > div.active:hover > .para, -#box > div.active:hover > .para > p { - background: #90221e; +.card #card_number { + position: absolute; + top: 10px; + left: 19px; + border: none; + outline: none; } -#body { - margin-top: 400px; +.card #expiry { + position: absolute; + top: 10px; + right: 57px; + width: 10%; + border: none; + outline: none; } - -@media only screen and (min-width: 1001px) and (max-width: 1320px) { - - #form { - width: 71%; - margin: 80px auto; - } - #box > div { - width: 22%; - margin: 0 8px; - } +.card #cvc { + position: absolute; + right: 0px; + width: 10%; + top: 10px; + border: none; + outline: none; } -@media only screen and (min-width: 780px) and (max-width: 1000px) { - #text1 > h1 { - font-size: 38px; - } - #text2 > h3 { - font-size: 28px; - } - #form { - width: 71%; - margin: 80px 0px; - } - #box > div { - width: 22%; - margin: 0 8px; - } - #twitter{ - flex-direction: column; - } - #twitter>div{ - width:50%; - } +.term-of-service { + background: #222; + color: #aaa; + font-size: 14px; + margin-bottom: 20px; + padding: 10px; + margin-top: 20px; + width: 100%; } - -@media only screen and (min-width: 391px) and (max-width: 779px) { - #text1 > h1 { - font-size: 30px; - } - #text2 > h3 { - font-size: 22px; - } - #form { - width: 84%; - - margin-top: 450px; - margin-left:10px; - } - - #logo { - display: flex; - flex-wrap: wrap; - } - #text3 { - margin-top: 170px; - } - - #twitter{ - flex-direction: column; - } - #twitter>div{ - width:50%; - } - #box{ - display: grid; - grid-template-columns: repeat(2,1fr); - gap:10px; - } - #box>div{ - width:80%; - box-sizing: border-box; - margin: 0px 10px; - - } - +.term-of-service a { + color: #dd625e; } -@media only screen and (min-width: 50px) and (max-width: 390px) { - #text1 > h1 { - font-size: 25px; - padding:10px; - } - #text2 > h3 { - font-size: 18px; - padding:10px; - margin-top: 110px; - } - #form { - width: 85%; - - margin-top: 370px; - margin-left:10px; - } - - #logo { - display: flex; - flex-wrap: wrap; - } - #text3 { - margin-top: 410px; - } - - #twitter{ - flex-direction: column; - } - #twitter>div{ - width:80%; - margin-left:40px; - } - #box{ - flex-direction: column; - margin-top: 350px; - gap: 20px; - - } - #box>div{ - width:80%; - margin: auto; - - } - #form>div>.g-recaptcha{ - width:80px; - } - #question { - height: 200px; - } - #question #p { - font-size: 28px; - } - #question p { - font-size: 15px; - } +.submit-container input[type="submit"] { + font-size: 19px; + padding: 20px 30px; + background: #c02d28; + border: none; + box-shadow: none; + max-width: 190px; + border: none; + border-radius: 40px; + color: #fff; + cursor: pointer; + line-height: 1.25; + text-align: center; + vertical-align: middle; + margin-right: 20px; + transition: background 0.2s ease; +} +.submit-container input[type="submit"]:hover { + background: #d43530; } - diff --git a/account.html b/account.html new file mode 100644 index 0000000..a93a4ea --- /dev/null +++ b/account.html @@ -0,0 +1,21 @@ + + + + + + + My Account + + + + + +
    + + + + + + + + diff --git a/components/navbar.js b/components/navbar.js index 20b3540..ac19c12 100644 --- a/components/navbar.js +++ b/components/navbar.js @@ -1,5 +1,66 @@ function navbar() { - return `
    + let logged_user = JSON.parse(localStorage.getItem("logged_user")); + if (logged_user) { + console.log(logged_user); + return `
    +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    +
    + +
    + + + + + + + + + +
    `; + } else { + return `
    `; + } } export default navbar; diff --git a/joinnow.html b/joinnow.html index c2ad164..e165228 100644 --- a/joinnow.html +++ b/joinnow.html @@ -1,257 +1,176 @@ - - - - - - - + + + + + + + - Document - - -
    - -
    - -
    -

    - Master Modern JavaScript to Full Stack -

    -
    -
    -

    - 100+ Courses, Learning Paths & Mobile Apps for "On the Go" Learning -

    -
    - - -
    -

    If you already have an account, please login

    -
    -
    -
    -
    -
    + Frontend Masters Pricing + + +
    +
    +
    +

    Master Modern JavaScript to Full Stack

    +

    + 100+ Courses, Learning Paths & Mobile Apps for "On the Go" Learning +

    +
    + + + + + + + + + +
    +
    +

    + If you already have an account, please + login. +

    +
    +
    +
    +

    MONTHLY

    -
    +

    $39

    -
    +

    Access all premium courses, workshops, and mobile apps. Renewed monthly.

    -
    -
    -
    +
    +
    +

    YEARLY

    -
    +

    $390

    -
    +

    Access everything. Renewed yearly. Save $78 per year!

    -
    -
    -
    +
    +
    +

    MONTHLY TEAM

    -
    +

    $195

    -
    +

    Access for 10 people at your company, renewed monthly. Save 50% on our monthly plans!

    -
    -
    -
    +
    +
    +

    YEARLY TEAM

    -
    +

    $1950

    -
    +

    Access for 10 people at your company, renewed yearly. Save 50% on our yearly plans!

    +
    +
    +

    Register for a Monthly Account

    +
    +
    + + +
    +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + + +
    +
    By clicking Start Learning, you agree to our Terms + of Service and Privacy Policy.
    +
    + +
    +
    +
    -
    -
    -

    Register for a Monthly Account

    -

    Email (you'll need to confirm this email address)

    - -

    -
    -
    -

    First Name

    - -

    -
    -
    -

    Last Name

    - -

    -
    -
    -

    Password

    - -

    -

    Password Again

    - -

    -

    Choose Your Payment Method

    - -
    - - - MM/YY CVC"> -

    - -
    -

    -
    -

    By clicking Start Learning, you agree to our Terms - of Service and Privacy Policy.

    -
    - Start Learning - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    Anthony R. 🇫🇷🚀💻
    -

    @AnthonyHexium

    -
    -
    - -
    -
    -
    -

    @catalinmpit @FrontendMasters This is the best investment I made in my career. I mean, by faaaaaaaar.

    -
    -
    -
    -

    6:36pm · Aug 20, 2020

    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    Andrew Rowley
    -

    @_internetdrew

    -
    -
    - -
    -
    -
    -

    Listen, if you’ve been questioning whether or not you should subscribe to @FrontendMasters, I’ll tell you right now, just do it. - - Literally learned nothing new as far as what I’m using but have a completely different sense of understanding of HOW to make things play together!

    -
    -
    -
    -

    9:26pm · Dec 14, 2021

    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    J.
    -

    @jsilvax

    -
    -
    - -
    -
    -
    -

    I’ve been using @FrontendMasters for years now. It’s crazy seeing it grow over the years and how there’s just so much great content to learn from. I feel like every company should have a subscription for their devs on there. The best bang for your buck.

    -
    -
    -
    -

    2:53am · Aug 28, 2020

    -
    -
    -
    -
    -

    Questions on your account?

    -

    Ask us anything! 😀 support@frontendmasters.com

    -
    -
    - - - - + + - + diff --git a/scripts/account-page.js b/scripts/account-page.js new file mode 100644 index 0000000..83ed869 --- /dev/null +++ b/scripts/account-page.js @@ -0,0 +1,15 @@ +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +// Header & Footer +let header = document.querySelector(".header"); +let footer_container = document.querySelector("#footer"); +header.innerHTML = navbar(); +footer_container.innerHTML = footer(); +document.querySelector("#footer").innerHTML = footer(); + +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); diff --git a/scripts/index.js b/scripts/index.js index 5c0ccb5..ad567ca 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,4 +1,4 @@ -import { navbar, hamburgerClick } from "../components/navbar.js"; +import navbar from "../components/navbar.js"; import { slider } from "../components/slider.js"; import { appendTwitterData } from "./slides.js"; import footer from "../components/footer.js"; @@ -7,7 +7,11 @@ document.querySelector(".header").innerHTML = navbar(); document.querySelector("#footer").innerHTML = footer(); // Click Event on Hamburger Icon -hamburgerClick(); +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); // Slider Container let slider_con = document.querySelector(".slider-container"); diff --git a/scripts/joinnow.js b/scripts/joinnow.js index 594cce1..8c0e9d2 100644 --- a/scripts/joinnow.js +++ b/scripts/joinnow.js @@ -1,138 +1,61 @@ +let sub_box = document.querySelectorAll(".sub-box"); + +let data = [ + "Register for a Monthly Account", + "Register for a Yearly Account", + "Register for a Monthly Team Account", + "Register for a Yearly Team Account", +]; +const changePlan = (el, msg) => { + sub_box.forEach((item) => { + item.classList.remove("active"); + }); + el.classList.add("active"); + let title = document.querySelector(".plan"); + title.innerText = msg; +}; - - -let box=document.getElementById("first") -box.classList.add("active") -let plan_boxes = document.querySelectorAll("#box>div"); - -plan_boxes.forEach((item) => { +sub_box.forEach((item, index) => { item.addEventListener("click", () => { - colorChange(item); + let msg = data[index]; + changePlan(item, msg); }); }); -function colorChange(item) { - plan_boxes.forEach((el) => { - el.classList.remove("active"); - }); - item.classList.add("active"); - -} - - -document.querySelector("#form").addEventListener("submit",myFormSubmit); - -var signinobj=JSON.parse(localStorage.getItem("registeredIds")) || []; - - -let a=document.getElementById("erremail") -let b=document.getElementById("errfname") -let c=document.getElementById("errlname") -let d=document.getElementById("errpassword") -let e=document.getElementById("errpasswordagain") -let f=document.getElementById("errcardname") -let g=document.getElementById("errcheck") - //console.log(signinArr); -function myFormSubmit(event){ - event.preventDefault(); - - if - ( - (document.getElementById("email").value=="")|| - (document.getElementById("first_name").value=="")|| - (document.getElementById("last_name").value=="")|| - (document.getElementById("password").value=="")|| - (document.getElementById("password_again").value=="")|| - (document.getElementById("placeholder").value=="")|| - (document.getElementById("card_num").value=="") - ) - { - a.innerText="Please enter a valid email." - a.style.color="red"; - a.style.fontStyle="italic"; - a.style.fontSize="16px"; - - b.innerText="Please enter your first name." - b.style.color="red"; - b.style.fontStyle="italic"; - b.style.fontSize="16px"; - - c.innerText="Please enter your last name." - c.style.color="red"; - c.style.fontStyle="italic"; - c.style.fontSize="16px"; - - d.innerText="Please enter correct password" - d.style.color="red"; - d.style.fontStyle="italic"; - d.style.fontSize="16px"; - - e.innerText="Please enter a matching password." - e.style.color="red"; - e.style.fontStyle="italic"; - e.style.fontSize="16px"; - - f.innerText="Your card number is incomplete." - f.style.color="red"; - f.style.fontStyle="italic"; - f.style.fontSize="16px"; - - g.innerText="Please check the box." - g.style.color="red"; - g.style.fontStyle="italic"; - g.style.fontSize="16px"; - - } - - else{ - - var signinobj=[{ - email:document.querySelector("#email").value, - fname:document.querySelector("#first_name").value, - lname:document.querySelector("#last_name").value, - password:document.querySelector("#password").value, - password_again:document.querySelector("#password_again").value, - placeholder:document.querySelector("#placeholder").value, - card_num:document.querySelector("#card_num").value, - }]; - document.querySelector("#email").value=""; - document.querySelector("#first_name").value=""; - document.querySelector("#last_name").value=""; - document.querySelector("#password").value=""; - document.querySelector("#password_again").value=""; - document.querySelector("#placeholder").value=""; - document.querySelector("#card_num").value=""; - - - localStorage.setItem("registeredIds",JSON.stringify(signinobj)); - - window.location.href="https://frontendmasters.com/" - } - - - } - - - - document.querySelector("#first").addEventListener("click",changeCol) - document.querySelector("#sec").addEventListener("click",changeCol1) - document.querySelector("#third").addEventListener("click",changeCol2) - document.querySelector("#fourth").addEventListener("click",changeCol3) - - function changeCol(){ - let text=document.querySelector("#title") - text.innerHTML="Register for a Monthly Account" - } - function changeCol1(){ - let text=document.querySelector("#title") - text.innerHTML="Register for a Yearly Account" - } - function changeCol2(){ - let text=document.querySelector("#title") - text.innerHTML="Register for a Monthly Team Account" - } - function changeCol3(){ - let text=document.querySelector("#title") - text.innerHTML="Register for a Yearly Team Account" - } - +let form = document.querySelector("#register"); + +const storeData = () => { + event.preventDefault(); + let login_data = JSON.parse(localStorage.getItem("login_data")) || []; + let email = document.getElementById("email").value; + let fn = document.getElementById("first_name").value; + let ln = document.getElementById("last_name").value; + let password = document.getElementById("password").value; + let payment_type = document.getElementById("payment_option").value; + let card_number = document.getElementById("card_number").value; + let expiry = document.getElementById("expiry").value; + let cvc = document.getElementById("cvc").value; + + let detail = { + email, + fn, + ln, + password, + payment_type, + card_number, + expiry, + cvc, + }; + login_data.push(detail); + localStorage.setItem("login_data", JSON.stringify(login_data)); + document.getElementById("email").value = ""; + document.getElementById("first_name").value = ""; + document.getElementById("last_name").value = ""; + document.getElementById("password").value = ""; + document.getElementById("password_again").value = ""; + document.getElementById("card_number").value = ""; + document.getElementById("expiry").value = ""; + document.getElementById("cvc").value = ""; + window.location.href = "Login.html"; +}; +form.addEventListener("submit", storeData); diff --git a/scripts/login-page.js b/scripts/login-page.js index cca5b5a..f89ecd8 100644 --- a/scripts/login-page.js +++ b/scripts/login-page.js @@ -15,41 +15,19 @@ hamburger.addEventListener("click", function () { navMenu.classList.toggle("active"); }); -let data = [ - { - name: "Aniket", - email: "aniket@gmail.com", - password: "test", - }, - { - name: "Miles", - email: "aniket0123@gmail.com", - password: "test", - }, - { - name: "Haresh", - email: "haresh2910@gmail.com", - password: "test", - }, - { - name: "Krunal", - email: "krunal3103@gmail.com", - password: "test", - }, -]; - let login_form = document.querySelector("#login-form"); const loginUser = () => { event.preventDefault(); - let regesiterData = JSON.parse(localStorage.getItem("registerData")) || []; + let login_data = JSON.parse(localStorage.getItem("login_data")) || []; + let email = document.querySelector("#email").value; let password = document.querySelector("#password").value; // if let success = false; let logged_user = null; - for (let i = 0; i < data.length; i++) { - let el = data[i]; + for (let i = 0; i < login_data.length; i++) { + let el = login_data[i]; if (el.email === email && el.password == password) { success = true; logged_user = el; diff --git a/styles/main.css b/styles/main.css index 7698a68..efa47ea 100644 --- a/styles/main.css +++ b/styles/main.css @@ -83,7 +83,9 @@ body { width: 90px; margin-top: 10px; margin-left: 10px; + object-fit: contain; opacity: 0.5; + transition: all 0.5s ease; } #icons img:hover { /* border: 1px solid #eff; */ @@ -125,6 +127,10 @@ body { margin-bottom: 50px; text-align: center; } +#join div div a { + text-decoration: none; + cursor: pointer; +} #join div { position: relative; z-index: 1; @@ -138,6 +144,7 @@ body { } #join button:hover { background-color: chocolate; + cursor: pointer; } #bootcamp { margin-top: 700px; diff --git a/styles/nav.css b/styles/nav.css index 118c54c..7a87c95 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -1,3 +1,11 @@ +* { + margin: 0; + padding: 0; + font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji; + font-family: Open Sans, sans-serif; +} + .header { width: 100%; background: linear-gradient(90deg, #c02d28, #e66225); @@ -50,6 +58,17 @@ .header-wrap .right ul li:last-child:hover { background: #d43530; } +.header-wrap .right ul li.logout:last-child { + background-color: transparent; + margin-left: 0; +} +.header-wrap .right ul li.logout:last-child a#logout { + color: #aaaaaa; +} +.header-wrap .right ul li.logout:last-child:hover a#logout { + color: #fff; + background-color: transparent; +} .header-wrap .right ul li { list-style: none; } From e7ffecbb92b286f5e58fcc93aca8fbd79653f326 Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Fri, 1 Apr 2022 10:37:24 +0530 Subject: [PATCH 19/32] update --- courses.html | 46 +- menuButton1.png | Bin 0 -> 11644 bytes menuButton2.png | Bin 0 -> 10042 bytes scripts/courses.js | 39 +- scripts/coursesData.js | 1008 ++++++++++++++++++++++++++++++++++++++++ styles/courses.css | 147 ++++-- 6 files changed, 1200 insertions(+), 40 deletions(-) create mode 100644 menuButton1.png create mode 100644 menuButton2.png create mode 100644 scripts/coursesData.js diff --git a/courses.html b/courses.html index 7e67bef..0bc726b 100644 --- a/courses.html +++ b/courses.html @@ -8,7 +8,23 @@ -
    +
    +

    Frontend Masters Courses

    + +
    + +
    +
    + + +
    +
    + diff --git a/menuButton1.png b/menuButton1.png new file mode 100644 index 0000000000000000000000000000000000000000..16a8d6dbe84b924047c3bd8fc26828f98741ee9a GIT binary patch literal 11644 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 literal 0 HcmV?d00001 diff --git a/menuButton2.png b/menuButton2.png new file mode 100644 index 0000000000000000000000000000000000000000..27fdf1d1725a3cb759bccab91df2ae699c3f3712 GIT binary patch literal 10042 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%0AqxdQ>#P1zL2?i#580rOfhJ0F}L0$ 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 literal 0 HcmV?d00001 diff --git a/scripts/courses.js b/scripts/courses.js index 79b375e..50c1166 100644 --- a/scripts/courses.js +++ b/scripts/courses.js @@ -2,13 +2,14 @@ const append = (data, parent)=>{ - // parent.innerHTML = null; + parent.innerHTML = null; data.forEach((el) => { // console.log('el:', el); + let mainClass = document.createElement("div"); - mainClass.className = "c"; + mainClass.className = "mainClass"; let outerDiv = document.createElement("div"); @@ -32,17 +33,27 @@ const append = (data, parent)=>{ btn1.innerText = "Watch Free Preview"; btn1.id = "btn1"; + let link1 = document.createElement("a"); + link1.href = "https://frontendmasters.com/courses/angular-13/"; + + link1.append(btn1); + let btn2 = document.createElement('button'); btn2.innerText = "Get Full Access"; btn2.id = "btn2"; + + let link2 = document.createElement('a'); + link2.href = "https://frontendmasters.com/join/ "; + + link2.append(btn2); let title = document.createElement("h2"); title.innerText = el.title; title.className ="title"; - btnClass.append(btn1, btn2); + btnClass.append(link1, link2); let instructorClass = document.createElement("div"); @@ -111,18 +122,28 @@ const append = (data, parent)=>{ parent.append(mainClass); + + }) +} + function search(data,inputValue) { + var searchText = inputValue.value.toLowerCase(); + console.log(searchText); + var filterData = data.filter(function (item) { + var elem = item.title.toLowerCase(); + return elem.includes(searchText); + }); + console.log('filterData:', filterData) + + append(filterData, main); + } +export { append, search }; +// export default append; - - - - }) -} -export default append; diff --git a/scripts/coursesData.js b/scripts/coursesData.js new file mode 100644 index 0000000..78058ba --- /dev/null +++ b/scripts/coursesData.js @@ -0,0 +1,1008 @@ +let coursesData = [ + { + title: "Angular 9 Fundamentals", + href: "\/courses\/angular-9\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Jun 29, 2020", + free: false, + bookmarked: false, + watched: false, + org: "Netflix", + time: "9 hours, 6 minutes ", + }, + + { + title: "State Machines in JavaScript with XState", + href: "\/courses\/xstate\/", + instructorName: "David Khourshid", + instructorSlug: "david-khourshid", + date: "Jun 15, 2020", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Intermediate Gatsby with Gatsby Themes", + href: "\/courses\/intermediate-gatsby\/", + instructorName: "Jason Lengstorf", + instructorSlug: "jason-lengstorf", + date: "Dec 17, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Gatsby", + href: "\/courses\/gatsby\/", + instructorName: "Jason Lengstorf", + instructorSlug: "jason-lengstorf", + date: "Jun 13, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Intermediate React, v2", + href: "\/courses\/intermediate-react-v2\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Jun 11, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Intro to React, v5", + href: "\/courses\/complete-react-v5\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Jun 4, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "TypeScript 3 Fundamentals, v2", + href: "\/courses\/typescript-v2\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Mar 26, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to GraphQL", + href: "\/courses\/graphql\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Jan 22, 2019", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Angular Core", + href: "\/courses\/angular-core\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Dec 21, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Node.js", + href: "\/courses\/node-js\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Nov 28, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "AWS for Front-End Engineers (ft. S3, Cloudfront \u0026 Route 53)", + href: "\/courses\/aws-frontend-react\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Oct 16, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Intermediate React", + href: "\/courses\/intermediate-react\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Sep 14, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Intro to React v4", + href: "\/courses\/complete-react-v4\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Sep 13, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Mastering Chrome Developer Tools v2", + href: "\/courses\/chrome-dev-tools-v2\/", + instructorName: "Jon Kuperman", + instructorSlug: "jon-kuperman", + date: "Sep 12, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Rapid Development on AWS: React, Node.js \u0026 GraphQL", + href: "\/courses\/aws-react-node-graphql\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Jul 16, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced GraphQL", + href: "\/courses\/advanced-graphql\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "May 23, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Testing React Applications, v2", + href: "\/courses\/testing-react\/", + instructorName: "Kent C. Dodds", + instructorSlug: "kentcdodds", + date: "May 13, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced React Patterns", + href: "\/courses\/advanced-react-patterns\/", + instructorName: "Kent C. Dodds", + instructorSlug: "kentcdodds", + date: "May 2, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "SQL Fundamentals", + href: "\/courses\/sql-fundamentals\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Apr 9, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Four Semesters of Computer Science in 5 Hours, Part 2", + href: "\/courses\/computer-science-2\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Apr 2, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Full Stack for Front-Ends Part 2", + href: "\/courses\/full-stack-v2\/", + instructorName: "Jem Young", + instructorSlug: "jem-young", + date: "Feb 14, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: + "REST \u0026 GraphQL API Design in Node.js, v2 (using Express \u0026 MongoDB)", + href: "\/courses\/api-node-rest-graphql\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Feb 13, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Building Awesomer Apps with Angular", + href: "\/courses\/building-apps-angular\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Feb 7, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "TypeScript Fundamentals", + href: "\/courses\/typescript\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Feb 6, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "CSS Grids and Flexbox for Responsive Web Design", + href: "\/courses\/css-grids-flexbox\/", + instructorName: "Jen Kramer", + instructorSlug: "jen-kramer", + date: "Jan 30, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "JavaScript: The Hard Parts", + href: "\/courses\/javascript-hard-parts\/", + instructorName: "Will Sentance", + instructorSlug: "will-sentance", + date: "Jan 22, 2018", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced State Management in React (feat. Redux and MobX)", + href: "\/courses\/react-state\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Dec 4, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Progressive Web Applications and Offline", + href: "\/courses\/progressive-web-apps\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Nov 9, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Vue.js", + href: "\/courses\/vue\/", + instructorName: "Sarah Drasner", + instructorSlug: "sarah-drasner", + date: "Sep 14, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Functional-Light JavaScript, v2", + href: "\/courses\/functional-javascript-v2\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Aug 14, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Deep JavaScript Foundations", + href: "\/courses\/javascript-foundations\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Jul 18, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Intro to React, v3 (feat. Redux, Router \u0026 Flow)", + href: "\/courses\/react\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Jun 26, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Testing JavaScript Applications (feat. React and Redux)", + href: "\/courses\/testing-javascript\/", + instructorName: "Kent C. Dodds", + instructorSlug: "kentcdodds", + date: "Jun 20, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Data Visualization with d3.js v4", + href: "\/courses\/d3-v4\/", + instructorName: "Shirley Wu", + instructorSlug: "shirley-wu", + date: "May 18, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Firebase \u002b React: Real-time, Serverless Web Apps", + href: "\/courses\/firebase-react\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Mar 31, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Data Structures and Algorithms in JavaScript", + href: "\/courses\/data-structures-algorithms\/", + instructorName: "Bianca Gandolfo", + instructorSlug: "bianca-gandolfo", + date: "Mar 29, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced Ember 2.x", + href: "\/courses\/advanced-ember-2\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Mar 29, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Full Stack for Front End Engineers", + href: "\/courses\/full-stack\/", + instructorName: "Jem Young", + instructorSlug: "jem-young", + date: "Mar 28, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Build Cross-Platform Desktop Apps with Electron", + href: "\/courses\/electron\/", + instructorName: "Steve Kinney", + instructorSlug: "steve-kinney", + date: "Mar 27, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Reactive Angular 2", + href: "\/courses\/reactive-angular\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Mar 20, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Building Awesome Web Apps with Angular 2", + href: "\/courses\/web-apps-angular-2\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Mar 15, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Intro to React, v2 (feat. Router v4 and Redux)", + href: "\/courses\/complete-intro-react\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Mar 6, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Website Accessibility", + href: "\/courses\/web-accessibility\/", + instructorName: "Jon Kuperman", + instructorSlug: "jon-kuperman", + date: "Feb 13, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Elm", + href: "\/courses\/elm\/", + instructorName: "Richard Feldman", + instructorSlug: "richard-feldman", + date: "Feb 5, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "ES6: The Right Parts", + href: "\/courses\/es6-right-parts\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Jan 10, 2017", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Zero to Production Node.js on Amazon Web Services", + href: "\/courses\/production-node-aws\/", + instructorName: "Kevin Whinnery", + instructorSlug: "kevin-whinnery", + date: "Dec 28, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Webpack 2 Deep Dive", + href: "\/courses\/webpack\/", + instructorName: "Kent C. Dodds", + instructorSlug: "kentcdodds", + date: "Nov 10, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "React Native (feat. Redux)", + href: "\/courses\/react-native\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Oct 27, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Mastering Chrome Developer Tools", + href: "\/courses\/chrome-dev-tools\/", + instructorName: "Jon Kuperman", + instructorSlug: "jon-kuperman", + date: "Oct 6, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Complete Introduction to React (feat. Redux and React Router)", + href: "\/courses\/react-intro\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Aug 9, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Four Semesters of Computer Science in 5 Hours", + href: "\/courses\/computer-science\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Jul 12, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Reactive Angular 2 with ngrx", + href: "\/courses\/reactive-angular-2\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Jun 1, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Build Web Apps with Angular 2", + href: "\/courses\/angular-2\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "May 4, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Functional-Lite JavaScript", + href: "\/courses\/functional-js-lite\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Mar 8, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced SVG Animation", + href: "\/courses\/svg-animation\/", + instructorName: "Sarah Drasner", + instructorSlug: "sarah-drasner", + date: "Feb 19, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Ember 2.x", + href: "\/courses\/ember-2\/", + instructorName: "Mike North", + instructorSlug: "mike-north", + date: "Jan 26, 2016", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "API Design in Node.js (using Express \u0026 Mongo)", + href: "\/courses\/api-design-nodejs\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Dec 30, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Component-Based Architecture in AngularJS 1.x and ES6", + href: "\/courses\/angular-components-es6\/", + instructorName: "Scott Moss", + instructorSlug: "scott-moss", + date: "Dec 30, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Building Web Apps (with React, Ampersand, ES6 and Webpack)", + href: "\/courses\/modern-web-apps\/", + instructorName: "Henrik Joreteg", + instructorSlug: "henrik-joreteg", + date: "Dec 1, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Meteor", + href: "\/courses\/meteor\/", + instructorName: "Chris Mather", + instructorSlug: "chris-mather", + date: "Nov 10, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Unit Testing JavaScript (with CoffeeScript)", + href: "\/courses\/unit-testing-javascript\/", + instructorName: "Justin Searls", + instructorSlug: "justin-searls", + date: "Oct 16, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Coercion in JavaScript", + href: "\/courses\/javascript-coercion\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Aug 19, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to JavaScript Programming", + href: "\/courses\/javascript-basics\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Aug 19, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "UI Prototyping with Framer.js", + href: "\/courses\/ui-prototyping-framer\/", + instructorName: "Jay Stakelon", + instructorSlug: "jay-stakelon", + date: "Jul 8, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "AngularJS 1.x Application Development", + href: "\/courses\/angular-app-dev\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Jun 5, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "React.js (with Introduction to Flux Architecture)", + href: "\/courses\/react-intro-to-flux\/", + instructorName: "Ryan Florence", + instructorSlug: "ryan-florence", + date: "May 8, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Responsive HTML Email Design", + href: "\/courses\/responsive-email\/", + instructorName: "Justine Jordan", + instructorSlug: "justine-jordan", + date: "Apr 13, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced JS Fundamentals to jQuery \u0026 Pure DOM Scripting", + href: "\/courses\/javascript-jquery-dom\/", + instructorName: "Justin Meyer", + instructorSlug: "justin-meyer", + date: "Mar 21, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "JavaScript: From Fundamentals to Functional JS", + href: "\/courses\/js-fundamentals-to-functional\/", + instructorName: "Bianca Gandolfo", + instructorSlug: "bianca-gandolfo", + date: "Jan 16, 2015", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "JS.Next: ES6 \/ ES2015", + href: "\/courses\/jsnext-es6\/", + instructorName: "Aaron Frost", + instructorSlug: "aaron-frost", + date: "Dec 15, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Responsive Typography", + href: "\/courses\/responsive-typography\/", + instructorName: "Jason Pamental", + instructorSlug: "jason-pamental", + date: "Nov 17, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Introduction to Web Development", + href: "\/courses\/web-development\/", + instructorName: "Nina Zakharenko", + instructorSlug: "nina-zakharenko", + date: "Oct 16, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Choosing a JavaScript Framework", + href: "\/courses\/javascript-frameworks-showdown\/", + instructorName: "Brian Holt", + instructorSlug: "brian-holt", + date: "Sep 10, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Hardcore Functional Programming in JavaScript", + href: "\/courses\/functional-javascript\/", + instructorName: "Brian Lonsdorf", + instructorSlug: "brian-lonsdorf", + date: "Aug 15, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Real-Time Web with Node.js", + href: "\/courses\/realtime-html5-nodejs\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Jul 12, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Advanced JavaScript", + href: "\/courses\/advanced-javascript\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Jun 14, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "HTML5 Media: Audio, Video \u0026 WebRTC", + href: "\/courses\/html5-media-apis\/", + instructorName: "Mark Boas", + instructorSlug: "mark-boas", + date: "Apr 8, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Front-End Tooling and Workflows with Grunt and Beyond", + href: "\/courses\/workflows-and-tooling\/", + instructorName: "David Mosher", + instructorSlug: "david-mosher", + date: "Mar 6, 2014", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Interactive Data Visualization with D3.js", + href: "\/courses\/interactive-data-visualization-d3-js\/", + instructorName: "Ian Johnson", + instructorSlug: "ian-johnson", + date: "Dec 20, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Angular 1.x Essentials", + href: "\/courses\/angularjs-in-depth\/", + instructorName: "Lukas Ruebbelke", + instructorSlug: "lukas-ruebbelke", + date: "Nov 19, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Backbone.js (with Introduction to Testing)", + href: "\/courses\/backbone-js-in-depth-testing-mocha-sinon\/", + instructorName: "Sam Breed", + instructorSlug: "sam-breed", + date: "Oct 16, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "CSS3 In-Depth", + href: "\/courses\/css3-in-depth\/", + instructorName: "Estelle Weyl", + instructorSlug: "estelle-weyl", + date: "Aug 25, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Web UI Architecture", + href: "\/courses\/web-ui-architecture\/", + instructorName: "Garann Means", + instructorSlug: "garann-means", + date: "Jul 3, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Lean Front-End Engineering", + href: "\/courses\/lean-front-end-engineering\/", + instructorName: "Bill Scott", + instructorSlug: "bill-scott", + date: "Jun 7, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Responsive Web Design", + href: "\/courses\/responsive-web-design\/", + instructorName: "Ben Callahan", + instructorSlug: "ben-callahan", + date: "Apr 30, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "Website Performance", + href: "\/courses\/website-performance\/", + instructorName: "Kyle Simpson", + instructorSlug: "kyle-simpson", + date: "Mar 29, 2013", + free: false, + bookmarked: false, + watched: false, + }, + + { + title: "JavaScript the Good Parts", + href: "\/courses\/javascript-the-good-parts\/", + instructorName: "Douglas Crockford", + instructorSlug: "douglas-crockford", + date: "Feb 19, 2013", + free: false, + bookmarked: false, + watched: false, + }, + ]; + +console.log(coursesData); + + + //instructor_image data + + for (let i = 0; i < 87; i++) { + if (i < 10) { + coursesData[i].instructor_img_url = + "./instructors_images/instructor_00" + (i + 1) + ".webp"; + } else { + coursesData[i].instructor_img_url = + "./instructors_images/instructor_0" + (i + 1) + ".webp"; + } + } + + //course_images data + for (let i = 0; i < 87; i++) { + if (i < 10) { + coursesData[i].course_img_url = + "./course_images/course_00" + (i + 1) + ".webp"; + } else { + coursesData[i].course_img_url = + "./course_images/course_0" + (i + 1) + ".webp"; + } + } + + //description data + for (let i = 0; i < 87; i++) { + coursesData[i].course_description = + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nobis maiores perspiciatis dolor! Id voluptatum aliquam quia, reiciendis debitis ut magnam pariatur! Dolor consectetur alias esse quasi, fugiat perspiciatis temporibus?"; + } + + //time Data + + for (let i = 1; i < 87; i++) { + coursesData[i].time = + Math.floor(Math.random() * 13) + + " " + + "hours" + + " " + + Math.floor(Math.random() * 60) + + " " + + "Minutes"; + } + + console.log(coursesData); \ No newline at end of file diff --git a/styles/courses.css b/styles/courses.css index 86415bc..3686e34 100644 --- a/styles/courses.css +++ b/styles/courses.css @@ -1,33 +1,111 @@ *{ font-family: sans-serif; + margin: 0; } body{ background-color: #222222; } - + + .header{ + width: 85%; + margin:auto; + /* height: 100px; */ + /* border: 1px solid red; */ + color: #e6e6e6; + padding: 25px 0px 25px 0px; + display: flex; + /* justify-content: flex-end; */ + justify-content: space-between; + } + input{ + width: 30%; + background-color:#3e3e3e; + border: none; + border-radius:5px; + color: white; + } + ::-webkit-input-placeholder{ + color:grey; + } + + #wrap{ + width: 100%; + height: 40px; + background-color: #161616; + /* border: 1px solid red; */ + padding: 0 30px; + /* margin: 0 50px 0 50px; */ + /* margin-bottom:50px; */ + } + #nav{ + display:block; + margin-left: 7%; + } + #nav>a{ + padding: 0px 10px; + line-height: 40px; + font-size: 16px; + text-decoration: none; + color: grey; + } + #expand{ + width: 100%; + /* height: 100px; */ + /* margin: auto; */ + margin-top:10px; + margin-bottom: 10px; + /* border: 1px solid green; */ + display:flex; + flex-direction: row; + justify-content: flex-end; + gap: 10px; + } + #menuButton{ + width: 20px; + height: 20px; + } #main { - width: 80%; + width: 85%; margin: auto; height: auto; /* border: 5px solid red; */ /* padding: 30px; */ - display: grid; + /* display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(10, 1fr); - grid-gap:80px; + grid-gap:80px; */ + display: flex; + flex-direction: row; + flex-wrap: wrap; + /* align-items: flex-start; */ + justify-content: space-between; + + + /* margin-top: 0px; */ } - .c { - width: 451px; - height: 377px; + .mainClass { + width: 49%; + height: 400px;; + /* min-height: 200px; */ position: relative; + margin-bottom: 25px; + /* display: flex; */ + /* display: flex; */ + /* flex-direction: row; */ + /* flex-wrap: wrap; */ + /* align-items: flex-start; */ + /* justify-content: flex-start; */ /* border: 5px solid red; */ /* background-color: aqua; */ } #outer { - width: 377.5px; - height: 360px; + /* width: 377.5px; */ + width: auto; + height: 85%; + /* margin: 10px; */ + /* min-height: auto; */ /* border: 5px solid yellow; */ opacity: 1; @@ -35,52 +113,58 @@ } #inner { - width: 400px; - height: 360px; + /* width: 400px; */ + width: auto; + /* min-height: 360px; */ + /* border: 1px solid red; */ + height:85%; position: absolute; - top:-.01px; + top: 0px;; left: 80px; - - + z-index: 5; background-image: radial-gradient(circle at left center, rgba(0, 0, 0, 0.3) 0px, rgb(0, 0, 0) 25%); } .btnClass{ - height: 20px; - width: 87%; + height: 20%; + width:100%; /* border:solid 1px white; */ - padding: 15px; - margin-left: 0px; + padding: 35px; + /* margin-left: 0px; */ + margin-right: 50px; } .descriptionClass{ - height: 280px; + height: 70%; width: 100%; /* border:solid 1px white; */ } .description{ color: white; margin-left:20px; + margin-right:20px; font-size:14px; } .title{ color: #DD625E; margin-left: 20px; + margin-right: 20px; + margin-top:20px; } .instructorClass{ - height: 80px; + min-height: 80px; width: 100%; /* border:solid 1px red; */ } .descrClass{ - height: 100px; + min-height: 100px; width: 100%; /* border:solid 1px green; */ } .timeClass{ - height: 40px; + min-height: 40px; width: 100%; display: inline-block; @@ -105,7 +189,7 @@ .instructor_img{ - height: 78px; + min-height: 78px; width: 78px; border-radius: 100%; margin-left: 20px; @@ -118,7 +202,8 @@ .anchorClass{ display: flex; - flex-direction: row; + flex-direction: row; + margin-right: 20px; } .instructorName{ @@ -131,7 +216,7 @@ background-color:#C02D28; color: white; padding: 10px 20px; - /* height: 45px; */ + /* min-height: 45px; */ margin-left: 0px; border: none; border-radius:40px; @@ -157,8 +242,10 @@ } #inner { - width: 400px; - height: 360px; + /* width: 400px; */ + width: auto; + /* height: 360px; */ + height: auto; position: absolute; top:-.01px; left: 80px; @@ -173,8 +260,10 @@ grid-template-columns: repeat(1 ,1fr); } #inner { - width: 400px; - height: 360px; + /* width: 400px; */ + width: auto; + /* height: 360px; */ + height: auto; position: absolute; top:-.01px; left: 80px; From ae576cc6d4b94f65102848739d224f7ac8ad84e0 Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Fri, 1 Apr 2022 14:30:51 +0530 Subject: [PATCH 20/32] unused file deleted --- courses.html | 6 +++++- scripts/courses.js | 14 ++++++++++++++ styles/courses.css | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/courses.html b/courses.html index 0bc726b..a59cb89 100644 --- a/courses.html +++ b/courses.html @@ -6,9 +6,12 @@ Document + + -
    +
    +

    Frontend Masters Courses

    @@ -25,6 +28,7 @@

    Frontend Masters Courses

    + - + diff --git a/scripts/dashboard.js b/scripts/dashboard.js new file mode 100644 index 0000000..1352c3a --- /dev/null +++ b/scripts/dashboard.js @@ -0,0 +1,30 @@ +import navbar from "../components/navbar.js"; +import footer from "../components/footer.js"; + +document.querySelector(".header").innerHTML = navbar(); +document.querySelector("#footer").innerHTML = footer(); + +// Click Event on Hamburger Icon +const hamburger = document.querySelector(".menu"); +const navMenu = document.querySelector(".mobile"); +hamburger.addEventListener("click", function () { + navMenu.classList.toggle("active"); +}); + +const logout = () => { + window.location.href = "index.html"; + localStorage.removeItem("logged_user"); +}; +// For logout +let logout_btn = document.getElementById("logout"); +if (logout_btn) { + logout_btn.addEventListener("click", logout); +} + +let user = document.getElementById("user"); +let user_name = document.getElementById("user_name"); + +let logged_user = JSON.parse(localStorage.getItem("logged_user")); +console.log(logged_user); +user.innerText = "Welcome Back, " + logged_user.fn + " " + logged_user.ln; +user_name.innerText = "Welcome Back, " + logged_user.fn + " " + logged_user.ln; diff --git a/scripts/login-page.js b/scripts/login-page.js index a80a899..a5d75d7 100644 --- a/scripts/login-page.js +++ b/scripts/login-page.js @@ -50,7 +50,7 @@ const loginUser = () => { let alert_box = document.querySelector(".alert-msg"); if (success) { localStorage.setItem("logged_user", JSON.stringify(logged_user)); - window.location.href = "account.html"; + window.location.href = "dashboard.html"; } else { alert_box.innerText = "That wasn't correct. Try again?"; alert_box.classList.add("active-alert"); From 21c972a37f7730284068b5a93daeb56a28885e8f Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Sat, 2 Apr 2022 08:27:03 +0530 Subject: [PATCH 31/32] save --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 81d285c..7d32ae9 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Frontend Master Website - + From 8fcd0e9d41e9152cb922502b3f23394944a146ee Mon Sep 17 00:00:00 2001 From: Susmita549 <99960489+Susmita549@users.noreply.github.com> Date: Sat, 2 Apr 2022 10:40:21 +0530 Subject: [PATCH 32/32] twitter data done --- scripts/data.js | 355 +++++++++++++++++------------------------------- 1 file changed, 128 insertions(+), 227 deletions(-) diff --git a/scripts/data.js b/scripts/data.js index 4146b1e..9711f11 100644 --- a/scripts/data.js +++ b/scripts/data.js @@ -2,7 +2,7 @@ let twittweData = [ [ { name: "Negar Jamalifard", - user_name: "@NegarDev", + user_name: "@@NegarDev", profile_pic: "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", @@ -14,7 +14,7 @@ let twittweData = [ profile_pic: "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + time: "4:56pm · Dec 16, 2021", }, { name: "Bhargav", @@ -22,7 +22,7 @@ let twittweData = [ profile_pic: "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", msg: "Madly appreciate @FrontendMasters. Their Typescript courses are incredible! 🎉🎉", - time: "8:56pm · Dec 16, 2021", + time: "12:56pm · Nov 30, 2021", }, { name: "Kevin Powell", @@ -30,325 +30,226 @@ let twittweData = [ profile_pic: "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", msg: "@AlveeAkand @elyktrix @FrontendMasters Yes! @FrontendMasters is amazing. Super talented educators and quality content.", - time: "8:56pm · Dec 16, 2021", + time: "10:44pm · Oct 11, 2020", }, { name: "AJ Thompson", user_name: "@ajthompson", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + "https://pbs.twimg.com/profile_images/1236097570637844486/YNWHjUtv_reasonably_small.jpg", msg: "@acandael @scotups @FrontendMasters @FrontendMasters always delivers great courses. I’ve taken all of @scotups. He teaches in a way that feels like a conversation amongst friends.", - time: "8:56pm · Dec 16, 2021", + time: "3:57pm · Oct 11,2020", }, { name: "Dave Halewood", user_name: "@halewood", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", + "https://pbs.twimg.com/profile_images/1057964722585305088/jZJUDPhj_reasonably_small.jpg", msg: "@kieranmv95 @FrontendMasters Yes definitely, I’ve had membership for a couple of years, really good content given by top instructors.", - time: "8:56pm · Dec 16, 2021", + time: "8:33pm · Oct 5, 2020", }, ], [ { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Andrew Poe", + user_name: "@andrewtpoe", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/599651293423128578/-7h5hALt_reasonably_small.png", + msg: "@FrontendMasters is dollar for dollar the best money I've spent on continued education as a developer. So much A+ content.", + time: "2:50pm · Oct 21, 2020", }, { - name: "Brennnan.eth", - user_name: "@brennan", + name: "PurpleDoll lvl0", + user_name: "@purpledoll001", profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1216765400534409216/iKnNkFof_reasonably_small.jpg", + msg: "What an incredible XSTATE course you have on @FrontendMasters @DavidKPiano. Amazing tool and amazing way to reach our brains :D", + time: "9:48pm · Sep 2, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Sarah Drasner", + user_name: "@sarah_edo", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1281071936605323266/wc1KRZLK_reasonably_small.jpg", + msg: "I've really been enjoying @scotups courses, he's got everything from Next.js to GraphQL, to API design. He's a great instructor, does an amazing job walking through things and speaking to community and preferences too, hard to do! https://t.co/KaJnQw3HFo", + time: "6:07pm Oct 1,2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Gustavo Sanchez", + user_name: "@gusanchedev", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1260995399088824328/Z8L5nVjn_reasonably_small.jpg", + msg: "I just completed "JavaScript: The Hard Parts, v2" by @willsentance on @FrontendMasters! https://t.co/fB36c8Ohiv No better resource for full understanding Closures, asynchronous JS and classes and prototypes. Thanks @willsentance", + time: "5:51pm · Aug 21, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Tracey “3Shots” Berg-Fulton", + user_name: "@BergFulton", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1395830541409206277/DNlCTovQ_reasonably_small.jpg", + msg: "OMG @sarah_edo 's Intro to Vue course on @FrontendMasters is *so good*. I've made a few attempts to learn but this is the first time the lightbulb has fully come on. https://t.co/Nwp7QzbyqW", + time: "5:44pm · Aug 27, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "J.", + user_name: "@jsilvax", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1395830541409206277/DNlCTovQ_reasonably_small.jpg", + msg: "I’ve been using @FrontendMasters for years now. It’s crazy seeing it grow over the years and how there’s just so much great content to learn from. I feel like every company should have a subscription for their devs on there. The best bang for your buck.", + time: "2:53am · Aug 28, 2020", }, ], [ { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Megan Sullivan", + user_name: "@meganesulli", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1298757926790680576/bI2v6ehX_reasonably_small.jpg", + msg: "Just finished "Accessibility in JavaScript Applications" by @marcysutton on @FrontendMasters 🎉 10/10, would recommend! Good pace, great explanations, lots of code examples. Now I'm excited to make some #a11y improvements to my own projects! 🧠⚙️ https://t.co/gvliKoyehW", + time: "11:15pm · Aug 25, 2020", }, { - name: "Brennnan.eth", - user_name: "@brennan", + name: "Anthony R. 🇫🇷🚀💻", + user_name: "@AnthonyHexium", profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1388480669903466496/qBizVmo3_reasonably_small.jpg", + msg: "@catalinmpit @FrontendMasters This is the best investment I made in my career. I mean, by faaaaaaaar.", + time: "6:36pm · Aug 20, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Jeremy Stuart Barnes", + user_name: "@JeremyStuBarnes", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1204835226016346112/aXwPlrg4_reasonably_small.jpg", + msg: "I'm finishing up @FrontendMasters course "Full Stack for Front-End Engineers, v2" and it is one of the most enlightening courses I've taken on how the web works and learning about all of the intimidating ideas around servers, packets, proxies, etc. Highly recommend!", + time: "5:32pm · Aug 16, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Marco Monsanto", + user_name: "@marcomonsanto2", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1482381957560471554/I93pjNXG_reasonably_small.jpg", + msg: "Shout-out to @JemYoung and @willsentance for their amazing courses in @FrontendMasters!! Not only the content is amazing but they are also incredibly easy to watch and stay engaged.", + time: "1:50pm · Aug 1, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Sandeep Ranjan", + user_name: "@sandeepranjan_", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1500588301400809473/NQ5s9b7O_reasonably_small.jpg", + msg: "Thank you @FrontendMasters & @stevekinney for this awesome course State Management with Redux. Finally got confident with Redux.", + time: "11:43pm · Apr 28, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Kevin", + user_name: "@optimistic_updt", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1243303350042415104/yrucLbdT_reasonably_small.jpg", + msg: "Im in love with Frontend Masters and @holtbt!! Just working my way through the React lessons and I just love the way @holtbt explains the concepts and configs he runs. Awesome job!! #reactjs", + time: "8:06am · Jul 25, 2020", }, ], [ { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Joss Stancek", + user_name: "@JossWriteCode", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/3186893733/e380c06fba1c4e2ba4538d77ccb6ad8d_reasonably_small.jpeg", + msg: "Watching JavaScript: The Hard Parts, v2 with @willsentance on @FrontendMasters. He is an amazing teacher. I now understand what's happening on every line of a JS promise. Feels so good!", + time: "3:55pm · Jul 22, 2020", }, { - name: "Brennnan.eth", - user_name: "@brennan", + name: "Jay Papisan", + user_name: "@papistan1", profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1139758277699313664/7xmfaORG_reasonably_small.jpg", + msg: "Building out our @storybookjs + Design System for work with a little help from @EmmaBostian 's @FrontendMasters DS & React course - super concise and helpful to get up and running fast🔥", + time: "3:37am · Jul 19, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "billyhunt", + user_name: "@billyhunt", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1655720266/headshot-small_reasonably_small.jpg", + msg: "I really enjoyed watching @scotups's Client-Side GraphQL in React class on @FrontendMasters this weekend. He is a good teacher.", + time: "2:29pm · Jul 13, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Melvin", + user_name: "@Melvin_manni", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1502654407242047491/NvKStHkL_reasonably_small.jpg", + msg: "@holtbt React course on @FrontendMasters provided more insight and helped me appreciate React more. I already know some of the things being taught but i had no problem re-learning it. So far that is the best React course I've come across. 💯", + time: "8:56am · Jul 4, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Caleb Lovell", + user_name: "@NCaleb_Lovell", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1119737710057385984/tDO-nNID_reasonably_small.png", + msg: "@holtbt Hey Brian, many thanks for your course on containers and Docker on @FrontendMasters! SO glad to finally grasp how they work. I've lost many hours to failing with Docker because I didn't understand the internals. No more! Looking forward to Intro to Linux. Thanks!!", + time: "5:50pm · Jun 26, 2020", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Jimmy", + user_name: "@jimmyaldape", profile_pic: "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + msg: "@FrontendMasters courses are already paying off. Can’t stop. Won’t stop.", + time: "9:56pm · Jun 9, 2020", }, ], [ { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Stefan Fejes", + user_name: "@fejas713", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1176389111634112512/70t8NtS3_reasonably_small.jpg", + msg: "@FrontendMasters is like a fully fledged University at this point. There're many courses to chose from industry leading professionals. Having the ability to learn what you want when you want it is phenomenal.", + time: "11:51am · Apr 7, 2019", }, { - name: "Brennnan.eth", - user_name: "@brennan", + name: "Sam Ratemo", + user_name: "@sammyeast", profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1197971799251664897/-3c53xLD_reasonably_small.jpg", + msg: "@scotups following your node.js v3 on frontend masters, loving it. its straight 🔥🔥", + time: "10:51pm · Apr 3, 2019", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Olivia Oddo", + user_name: "@OliviaOddo", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/950536864787656704/Kd3wLQJx_reasonably_small.jpg", + msg:"Thank you @TheLarkInn and @stevekinney for your @FrontendMasters courses! I don’t think I would have landed my new job as a build infrastructure/web performance engineer without y’all 😍", + time: "6:44pm · Oct 18, 2018", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Nhu Phan 👩🏻‍💻🧘🏻‍♀️", + user_name: "@Nhuphan0404", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1251337586661974016/eheDTCuo_reasonably_small.jpg", + msg: "I have recently spent most of my time on @FrontendMasters, 👩🏻‍💻 with the beginning path🤓 , I tend to understand things clearly rather than doing without understanding it. Can't recommend FM enough, its content is amazing, feel like it is tailor-made for me 🤪🤓.", + time: "3:33am · Mar 1, 2019", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Ricky Garcia", + user_name: "@RickyGarcia", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/1261295422061940736/zo-7G1lq_reasonably_small.jpg", + msg:"I loved, LOVED, Javascript the Hardparts taught by @willsentance on @FrontendMasters. What an incredible deep dive. #FrontEnd #webdevelopment", + time: "6:27pm · Jan 26, 2019", }, { - name: "Negar Jamalifard", - user_name: "@NegarDev", + name: "Kelly Watson", + user_name: "@KellyWatson", profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - ], - [ - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Brennnan.eth", - user_name: "@brennan", - profile_pic: - "https://pbs.twimg.com/profile_images/1426593683474948096/slmgOn-I_reasonably_small.jpg", - msg: "@mathesondavid @FrontendMasters Without a doubt, @FrontendMasters has been one of, if not the best, resources for learning new topics, techniques, and technologies.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", - }, - { - name: "Negar Jamalifard", - user_name: "@NegarDev", - profile_pic: - "https://pbs.twimg.com/profile_images/1323722809168809990/1Fm6IBuY_reasonably_small.jpg", - msg: "I think I should subscribe to @FrontendMasters for life. The courses are super rich and on point. Never had this level of satisfaction with any education platforms.", - time: "8:56pm · Dec 16, 2021", + "https://pbs.twimg.com/profile_images/935215363792560128/MY76hbgO_reasonably_small.jpg", + msg: "@ArlanWasHere @FrontendMasters - it’s really worth the subscription. The tracks are fantastic. I wish I would have started there instead of cobbling together online places to learn on my own.", + time: "5:21pm · Apr 3, 2019", }, ], + ]; let mid_data = [