Skip to content

Commit

Permalink
Project Completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdmarufsarker
mdmarufsarker committed Apr 14, 2022
1 parent a5b9451 commit f057a34
Show file tree
Hide file tree
Showing 6 changed files with 311 additions and 55 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>Ramadan Calendar</title>
</head>
<body>
<div id="app"></div>
Expand Down
78 changes: 64 additions & 14 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,71 @@
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
<div>
<h1>Ramadan Calendar 2022</h1>
<hr />
<hr />
<div class="container">
<Rahmat />
<Magfirat />
<Najat />
</div>
<footer>
<h3>© 2022 Copyright | All rights reserved | Md. Maruf Sarker</h3>
</footer>
</div>
</template>

<script>
// import components
import Rahmat from "./components/Rahmat.vue";
import Magfirat from "./components/Magfirat.vue";
import Najat from "./components/Najat.vue";
export default {
components: {
Rahmat,
Magfirat,
Najat,
},
data() {
return {};
},
};
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Itim", cursive;
background-color: dodgerblue;
}
h1 {
color: #fff;
text-align: center;
padding-top: 20px;
}
hr {
height: 2px;
width: 300px;
margin: 3px auto;
background-color: #000;
border: none;
}
.container {
display: flex;
flex-direction: row;
margin-top: 10px;
justify-content: space-around;
flex-wrap: wrap;
}
h3 {
color: cyan;
text-align: center;
color: #2c3e50;
margin-top: 60px;
font-weight: 400;
margin-bottom: 10px;
}
</style>
40 changes: 0 additions & 40 deletions src/components/HelloWorld.vue
View file

This file was deleted.

73 changes: 73 additions & 0 deletions src/components/Magfirat.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<div class="rahmat">
<h2>10 days of Magfirat</h2>
<div class="wrapper">
<div class="parent">
<div class="count child" v-for="count in counts" :key="count">
{{ count }}
</div>
</div>
<div class="parent">
<div class="day child" v-for="day in days" :key="day">{{ day }}</div>
</div>
<div class="parent">
<div class="seheri child" v-for="seheri in seheri" :key="seheri">
{{ seheri }}
</div>
</div>
<div class="parent">
<div class="iftar child" v-for="iftar in iftar" :key="iftar">
{{ iftar }}
</div>
</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
counts: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
days: [
"Thursday",
"Friday",
"Saturday",
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
],
seheri: [
"04:15",
"04:14",
"04:13",
"04:12",
"04:11",
"04:10",
"04:09",
"04:08",
"04:07",
"04:06",
],
iftar: [
"06:23",
"06:24",
"06:24",
"06:24",
"06:25",
"06:25",
"06:26",
"06:26",
"06:27",
"06:27",
],
};
},
};
</script>

<style></style>
73 changes: 73 additions & 0 deletions src/components/Najat.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<div class="rahmat">
<h2>10 days of Najat</h2>
<div class="wrapper">
<div class="parent">
<div class="count child" v-for="count in counts" :key="count">
{{ count }}
</div>
</div>
<div class="parent">
<div class="day child" v-for="day in days" :key="day">{{ day }}</div>
</div>
<div class="parent">
<div class="seheri child" v-for="seheri in seheri" :key="seheri">
{{ seheri }}
</div>
</div>
<div class="parent">
<div class="iftar child" v-for="iftar in iftar" :key="iftar">
{{ iftar }}
</div>
</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
counts: [21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
days: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
"Monday",
"Tuesday",
],
seheri: [
"04:05",
"04:05",
"04:04",
"04:03",
"04:02",
"04:01",
"04:00",
"03:59",
"03:58",
"03:59",
],
iftar: [
"06:18",
"06:28",
"06:29",
"06:29",
"06:29",
"06:30",
"06:30",
"06:31",
"06:31",
"06:32",
],
};
},
};
</script>

<style></style>
100 changes: 100 additions & 0 deletions src/components/Rahmat.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<template>
<div class="rahmat">
<h2>10 days of Rahmat</h2>
<div class="wrapper">
<div class="parent">
<div class="count child" v-for="count in counts" :key="count">
{{ count }}
</div>
</div>
<div class="parent">
<div class="day child" v-for="day in days" :key="day">{{ day }}</div>
</div>
<div class="parent">
<div class="seheri child" v-for="seheri in seheri" :key="seheri">
{{ seheri }}
</div>
</div>
<div class="parent">
<div class="iftar child" v-for="iftar in iftar" :key="iftar">
{{ iftar }}
</div>
</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
counts: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
days: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
],
seheri: [
"04:26",
"04:25",
"04:24",
"04:23",
"04:22",
"04:21",
"04:20",
"04:19",
"04:18",
"04:16",
],
iftar: [
"06:19",
"06:20",
"06:20",
"06:21",
"06:21",
"06:22",
"06:22",
"06:22",
"06:23",
"06:23",
],
};
},
};
</script>

<style>
.rahmat {
width: 400px;
background-color: cyan;
margin: 20px;
border-radius: 10px;
}
.rahmat h2 {
font-size: 25px;
text-align: center;
padding: 10px 0 5px 0;
border-bottom: 10px solid dodgerblue;
}
.rahmat .wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.wrapper .parent {
line-height: 2;
font-size: 20px;
}
.wrapper .parent .child {
padding: 5px 10px;
}
@media only screen and (max-width: 1300px) {
}
</style>

0 comments on commit f057a34

Please sign in to comment.