Skip to content

Commit

Permalink
feat: Add accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhi3315
abhi3315 committed Oct 23, 2020
1 parent 86010ea commit 6ad92ab
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 102 deletions.
123 changes: 22 additions & 101 deletions course_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,109 +287,30 @@ <h3>Lorem Ipsum</h3>
<h2 style="text-align: center">Syllabus</h2>
</div>
<div class="col-12">
<div class="sub-card">
<div class="card card--dropdown">
<h3>Programming Language for AI</h3>
<p>
1. GIT (Version Control, Collaboration)<br />
2. Python Programming (Setting up the environment, Data types and
data structures, Decision Statements – if else, Conditional
Statements – while and for loop, Functions and Modules)
</p>
<hr />
<p class="hidden">
a) Get comfortable with Github. You’ll most likely be storing all
of your code in Github. Once you are working, you’ll be using Git
anyway to coordinate with other developers, so might as well start
now.<br />
b) Python is one of the most popular programming languages used by
developers today. Guido Van Rossum created it in 1989 and ever
since it’s been one of the most liked programming languages along
with C++ and Java.<br />
c) Python along with packages like NumPy, scikit-learn, pandas,
and matplotlib form the basis to start your AI project.
</p>
</div>
<div class="card card--dropdown">
<h3>Mathematical Essentials</h3>
<p>
1. Linear Algebra (Matrices and Vector Algebra, Dot Product,
Projection) 2. Statistics (Mean, Median, Mode, Variance, Standard
Deviation and Correlation, Percentiles) 3. Probability (Axioms of
Probability, Conditional Probability, Random Variables)
</p>
<hr />
<p class="hidden">
a) Statistics is a collection of tools that you can use to get
answers to important questions about the data b) Probability is
the study of uncertainty. It deals with predicting the likelihood
of future events. Probability is undeniably a pillar of the field
of machine learning. Why so? Machine learning is about developing
predictive models from uncertain data and perform predictions on
future unseen data c) Last but not least. Linear Algebra — Daily
bread and butter for Machine Learning. Without this you can’t
develop machine learning methods. It allows us to operate in
higher dimensional space
</p>
</div>
<div class="card card--dropdown">
<h3>Exploratory Data Analysis</h3>
<p>
1. Data Analysis (Numpy and Pandas) 2. Data Visualization
(Matplotlib, Seaborn and Plotly) 3. Telling Story about Data
(Univariate, Bivariate and Multivariate
</p>
<hr />
<p class="hidden">
a) NumPy is used as one of the most powerful numerical processing
library in python which provides extension package for
multi-dimensional array computation. b) Another useful library is
pandas, which can be used to load the data in memory and perform
analytics on top of it. c) If data is humongous, we might miss on
some of the very insightful patterns. This is where visualization
libraries like Matplotlib, Seaborn and Plotly comes for rescue.
</p>
<div class="container">
<button class="accordion">Profile</button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.</p>
</div>
<div class="card card--dropdown">
<h3>Machine Learning and Deep Learning</h3>
<p>
1. Data Preparation and Feature Transformation (Normalization and
Standardization, One Hot Encoding, Label Encoders, Stemming,
Lemmatization, Bag of Words, TF-IDF) 2. Regression (Linear
Regression, SVR, DT Regression) 3. Classification (Logistic
Regression, Decision Tree Classifier, Support Vector Machines,
Random Forest) 4. Clustering (K-Means, Principal Component
Analysis) 5. Deep Learning (History, Neural Network, ANN,
Perceptron’s and Activation Functions)
</p>
<hr />
<p class="hidden">
a) Data preparation (also referred to as “data preprocessing”) is
the process of transforming raw data so that data scientists and
analysts can run it through machine learning algorithms to uncover
insights or make predictions. b) The regression and classification
task comes from supervised machine learning. Regression helps in
prediction when the target or output variable is a continuous
value whereas classification is used when we have a limited set of
outcomes. c) An unsupervised learning technique performs as a way
of grouping related items together into various clusters. It
doesn’t have any output information for the training process.
</p>

<button class="accordion">Messages</button>
<div class="accordion-content">
<ul>
<li>Inbox</li>
<li>Sent</li>
<li>Drafts</li>
</ul>
</div>
<div class="card card--dropdown">
<h3>Web App Development and Deployment</h3>
<p>
1. Web Application Development (Project implementation using some
framework) 2. Deployment(Process, prepare, deploy client, deploy
server)
</p>
<hr />
<p class="hidden">
a) Throughout the course we will be building several projects. By
the end of the course, you will be able to understand the
end-to-end lifecycle of a ML project. Your skill will also include
deploying your projects on the internet.
</p>

<button class="accordion">Settings</button>
<div class="accordion-content">
<ul>
<li>Profile</li>
<li>Privacy & Safety</li>
<li>Notifications</li>
</ul>
</div>
</div>
</div>
Expand Down
73 changes: 73 additions & 0 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ header {
nav {
display: flex;
justify-content: space-between;
width: 100vw;
overflow-x: hidden;
}

a {
Expand Down Expand Up @@ -480,6 +482,73 @@ h2 {
grid-template-rows: min-content;
} */

.container {
width: 100%;
padding: 2rem;
margin: 3rem auto;
background: hsl(0, 0%, 14%);
border-radius: 1rem;
border: 1px solid #222;
box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.55);
}

.accordion {
background-color: #333;
color: #eee;
cursor: pointer;
padding: 1rem;
width: 100%;
border: 1px solid #222;
text-align: left;
outline: none;
font-size: 1rem;
transition: all 0.4s ease-out;
box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.75);
}

.accordion:first-child {
border-radius: 1rem 1rem 0 0;
}

.accordion:nth-last-child(2) {
border-radius: 0 0 1rem 1rem;
}

.syllabus .active, .accordion:hover {
background-color: #426ef0;
}

.syllabus .accordion:after {
content: "\002B";
color: #eee;
font-weight: bold;
float: right;
margin-left: 0.5rem;
}

.syllabus .active:after {
content: "\2212";
}

.accordion-content {
padding: 0 1rem;
background-color: #222;
color: #aaa;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

.accordion-content ul {
list-style-type: circle;
margin: 1rem 0;
padding: 0.2rem;
}

.accordion-content ul li {
padding: 0.2rem 0;
}

.overflow--pic {
position: absolute;
left: 50%;
Expand Down Expand Up @@ -599,4 +668,8 @@ hr {
box-shadow: -1px 4px 4px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.first-mentor {
display: flex;
flex-direction: column;
}
}
17 changes: 16 additions & 1 deletion main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,19 @@ $('.nav-container').on('click', () => {
$('.nav-container').removeClass('show-nav')
else
$('.nav-container').addClass('show-nav')
})
})

let acc = document.querySelectorAll(".accordion");
let i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}

0 comments on commit 6ad92ab

Please sign in to comment.