Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssmns
ssmns committed Aug 16, 2024
0 parents commit e048dc3
Show file tree
Hide file tree
Showing 3 changed files with 384 additions and 0 deletions.
90 changes: 90 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.cheats {
display: grid;
border-radius: 1px red solid;
grid-template-columns: 1fr 1fr;
}
.section {
border: 1px grey solid;
border-radius: 10px;
box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.1);
margin: 5px;
padding: 5px;
}

h1 {
margin: 25px;
}


.title {
background: rgba(128, 128, 128, 0.2);
background: linear-gradient(
0deg,
rgba(128, 128, 128, 0) 0%,
rgba(128, 128, 128, 0.2) 100%
);
}
.title a,.title {
display: flex;
align-items: center;
align-content: center;
padding-left: 5px;

border-radius: 9px;

user-select: none;
text-decoration: none;
}

.title i {
font-size: 25px;
margin-right: 5px;
padding: 5px;

}
.contents {
display: grid;
text-align: center;
padding: 5px;
font-family: "Noto Sans Mono", monospace;
}

.contents div p {
width: 100%;
text-align: justify;
margin-left: 15px;
padding: 5px 0;
}
.col-5 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.col-4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}

.col-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.col-2 {
grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 950px) {
.cheats {
grid-template-columns: 1fr;
}
}
248 changes: 248 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/@phosphor-icons/[email protected]/src/duotone/style.css"
/>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:[email protected]&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet"
/>

<link rel="stylesheet" href="css/style.css" />

<title>Document</title>
</head>
<body>
<div class="container">
<h1>SQL Cheat Sheet</h1>

<div class="paragraph">
<p>
We use Sqlite and the Sakila Sample database [<a
href="https://www.kaggle.com/datasets/atanaskanev/sqlite-sakila-sample-database"
target="_blank"
>kaggle.com</a
>]. <br />
</p>
<p>The diagram of database is:</p>
<p>
<img src="" alt="" srcset="">
</p>
</div>

<div class="cheats">
<div class="section">
<div class="title">
<a
href="sections/basics/"
target="_blank"
rel="noopener noreferrer"
>
<i class="ph-duotone ph-database"></i>
<h2>Basics</h2>
</a>
</div>
<div class="contents col-5">
<div>
<p>select</p>
<p>from</p>
<p>where</p>
</div>
<div>
<p>group by</p>
<p>having</p>
<p>oerder by</p>
<p>limit</p>
</div>
<div>
<p>=</p>
<p>!=</p>
<p><</p>
<p>></p>
</div>
<div>
<p><=</p>
<p>>=</p>
<p>True</p>
<p>False</p>
</div>
<div>
<p>not</p>
<p>in</p>
<p>between</p>
</div>
</div>
</div>

<div class="section">
<div class="title">
<i class="ph-duotone ph-sigma"></i>
<h2>Aggregate Functions</h2>
</div>
<div class="contents col-3">
<div>
<p>min()</p>
<p>max()</p>
<p>avg()</p>
</div>
<div>
<p>count()</p>
<p>median()</p>
<p>mode()</p>
<p>stddev()</p>
</div>
<div>
<p>w/group by</p>
<p>w/ having</p>
<p>w/ distinct</p>
</div>
</div>
</div>

<div class="section">
<div class="title">
<i class="ph-duotone ph-text-aa"></i>
<h2>String Manipulation</h2>
</div>
<div class="contents col-3">
<div>
<p>concat()</p>
<p>replace()</p>
<p>reverse()</p>
<p>trim()</p>
</div>
<div>
<p>upper()</p>
<p>lower()</p>
<p>len()</p>
<p>str()</p>
</div>
<div>
<p>wildcards (%)</p>
<p>like / ilike</p>
</div>
</div>
</div>

<div class="section">
<div class="title">
<i class="ph-duotone ph-calendar-dots"></i>
<h2>Date Manipulation</h2>
</div>
<div class="contents col-2">
<div>
<p>day()</p>
<p>month()</p>
<p>year()</p>
<p>getdate()</p>
</div>
<div>
<p>date_add()</p>
<p>datediff()</p>
<p>date_trunc()</p>
<p>date_format()</p>
</div>
</div>
</div>

<div class="section">
<div class="title">
<i class="ph-duotone ph-link"></i>
<h2>Joins</h2>
</div>
<div class="contents col-2">
<div>
<p>inner join</p>
<p>left join</p>
<p>outer join</p>
<p>self join</p>
</div>
<div>
<p>anti join</p>
<p>joining on multiple keys</p>
<p>joining on a condition</p>
</div>
</div>
</div>

<div class="section">
<div class="title">
<i class="ph-duotone ph-paint-brush-household"></i>
<h2>Cleaning & Transformation</h2>
</div>
<div class="contents col-3">
<div>
<p>cast()</p>
<p>coalesce()</p>
<p>case when</p>
<p>ifnull()</p>
</div>
<div>
<p>iff()</p>
<p>listagg()</p>
<p>except</p>
</div>
<div>
<p>Union</p>
<p>Union All</p>
<p>Intersect</p>
<p>Minus</p>
</div>
</div>
</div>

<div class="section">
<div class="title">
<i class="ph-duotone ph-grid-four"></i>
<h2>Window Functions</h2>
</div>
<div class="contents col-3">
<div>
<p>sum()</p>
<p>count()</p>
<p>avg()</p>
<p>max()</p>
<p>min()</p>
</div>
<div>
<p>row_number()</p>
<p>rank()</p>
<p>denserank()</p>
<p>lead()</p>
<p>lag()</p>
</div>
<div>
<p>over( ...</p>
<p>partition by<</p>
<p>order by</p>
<p>)</p>
</div>
</div>
</div>

<div class="section">
<div class="title">
<i class="ph-duotone ph-student"></i>
<h2>Advanced</h2>
</div>
<div class="contents col-2">
<div>
<p>CTEs</p>
<p>UDFs</p>
<p>Data Modeling</p>
<p>Subqueries</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
46 changes: 46 additions & 0 deletions sections/basics/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/@phosphor-icons/[email protected]/src/duotone/style.css"
/>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:[email protected]&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet"
/>

<link
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
rel="stylesheet"
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>

<link rel="stylesheet" href="/css/style.css" />
<title>SQL::Basics</title>
</head>
<body>
<div class="container">

<p>Select all tables in sql lite</p>
<pre><code class="code language-sql">
.tabels
</code></pre>
<p>
show all contents of albums.
</p>
<pre><code class="code language-sql">
select * from album;
</code></pre>


</div>
</body>
</html>

0 comments on commit e048dc3

Please sign in to comment.