Social media

Vanilla-JS-Projects/Basic/CSS-Art-Gallery/README.md

@@ -1,4 +1,4 @@
-<h1 align='center'><b>💥 CSS Art Gallery 💥</b></h1>
+<h1 align='center'><b>💥Social Media Analytics💥</b></h1>
 
 <!-- -------------------------------------------------------------------------------------------------------------- -->
 
@@ -8,9 +8,9 @@
 <div align='center'>
 
   ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) 
-  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) 
- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) 
- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+ ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) 
+   ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) 
+ ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 
   <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
   <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
   <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
@@ -33,7 +33,7 @@
 
 <div>
   <!-- <p>Add Description of the project</p> -->
-    <p>CSS Art Gallery showcases top arts developed by artists across the world using HTML and CSS</p>
+    <p>This projects gives a report of your media apps screen time</p>
 </div>
 
 
@@ -42,15 +42,17 @@
 ## :zap: How to run it? 🕹️
 
 <!-- Add steps how to run this project -->
-- Clone this repository.
-- Navigate to this project directory
-- Run the `index.html` file. 
+- Fork this repository
+-  Clone this repository
+-  run `index.html`
 
 
 <!-- -------------------------------------------------------------------------------------------------------------- -->
 
 ## :zap: Screenshots 📸
-![Image](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/MarkDown/Vanilla-JS-Projects/Basic/CSS-Art-Gallery/screenshot.webp)
+<!-- add the screenshot of the project (Mandatory) -->
+![Image](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/SocialMedia/Vanilla-JS-Projects/Intermediate/Social-Media-Analytics/screenshot.webp)
+
 
 
 
@@ -71,4 +73,4 @@
 
 <h4 align='center'>Happy Coding 🧑‍💻</h4>
 
-<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Vanilla-JS-Projects/Intermediate/Social-Media-Analytics/Readme.md

@@ -0,0 +1,76 @@
+<h1 align='center'><b>💥Social Media Analytics💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) 
+ ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) 
+   ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) 
+ ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>This projects gives a report of your media apps screen time</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+- Fork this repository
+-  Clone this repository
+-  run `index.html`
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+![Image](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/SocialMedia/Vanilla-JS-Projects/Intermediate/Social-Media-Analytics/screenshot.webp)
+
+
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Amruta Jayanti</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/amruta-jayanti-064523254?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/AmrutaJayanti'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Vanilla-JS-Projects/Intermediate/Social-Media-Analytics/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+    <link href="styles.css" rel="stylesheet">
+    <title>Social Media Analytics</title>
+</head>
+<body>
+    <div class="jumbotron jumbotron-custom text-center">
+        <div>
+            <h1>SOCIAL MEDIA ANALYTICS</h1>
+            <p>Worried About Screen Time!</p>
+        </div>
+    </div>
+
+    <div class="container form-container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <form id="screen-time-form">
+                    <div class="form-group">
+                        <label for="insta"><i class="fab fa-instagram"></i> Instagram Screen Time (minutes)</label>
+                        <input type="number" class="form-control" placeholder="Enter your Instagram screen time" id="insta-time">
+                    </div>
+                    <div class="form-group">
+                        <label for="whatsapp"><i class="fab fa-whatsapp"></i> WhatsApp Screen Time (minutes)</label>
+                        <input type="number" class="form-control" placeholder="Enter your WhatsApp screen time" id="whatsapp-time">
+                    </div>
+                    <div class="form-group">
+                        <label for="twitter"><i class="fab fa-twitter"></i> Twitter Screen Time (minutes)</label>
+                        <input type="number" class="form-control" placeholder="Enter your Twitter screen time" id="twitter-time">
+                    </div>
+                    <div class="form-group">
+                        <label for="youtube"><i class="fab fa-youtube"></i> YouTube Screen Time (minutes)</label>
+                        <input type="number" class="form-control" placeholder="Enter your YouTube screen time" id="youtube-time">
+                    </div>
+                    <button type="button" class="btn btn-primary" onclick="addData()">Submit</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <canvas id="screen-time-chart" width="400" height="400"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src=".\js\index.js"></script>
+</body>
+</html>

Vanilla-JS-Projects/Intermediate/Social-Media-Analytics/js/index.js

@@ -0,0 +1,37 @@
+var ctx = document.getElementById('screen-time-chart').getContext('2d');
+var chart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: ['Instagram', 'WhatsApp', 'Twitter', 'YouTube'],
+        datasets: [{
+            label: 'Screen Time (minutes)',
+            data: [0, 0, 0, 0],
+            backgroundColor: 'rgba(75, 192, 192, 0.2)',
+            borderColor: 'rgba(75, 192, 192, 1)',
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            y: {
+                beginAtZero: true
+            }
+        }
+    }
+});
+
+function addData() {
+    var instaTime = document.getElementById('insta-time').value;
+    var whatsappTime = document.getElementById('whatsapp-time').value;
+    var twitterTime = document.getElementById('twitter-time').value;
+    var youtubeTime = document.getElementById('youtube-time').value;
+
+    if (instaTime && whatsappTime && twitterTime && youtubeTime) {
+        chart.data.datasets[0].data = [instaTime, whatsappTime, twitterTime, youtubeTime];
+        chart.update();
+
+        document.getElementById('screen-time-form').reset();
+    } else {
+        alert('Please fill in all fields.');
+    }
+}

Vanilla-JS-Projects/Intermediate/Social-Media-Analytics/styles.css

@@ -0,0 +1,18 @@
+.jumbotron-custom {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+    background-color: #f8f9fa;
+}
+.form-container {
+    margin-top: 20px;
+}
+.social-icons {
+    text-align: center;
+    margin-top: 20px;
+}
+.social-icons i {
+    font-size: 2rem;
+    margin: 0 10px;
+    color: #C13584; /* Instagram's gradient color */
+}

Vanilla-JS-Projects/README.md

@@ -57,7 +57,7 @@
 |  30   | [Expense Tracker](./Basic/Expense-Tracker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge)  |
 |  31    | [CSS Art Gallery](./Basic/CSS-Art-Gallery) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge)  |
 |  32   | [Quote-Generator](./Basic/Quote-Generator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge)  |
-
+|  33  | [Social Media Analytics](./Intermediate/Social-Media-Analytics/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
 </div>
 
 

database/vanilla.json

@@ -105,8 +105,15 @@
 		"description" :"RGB Color Slider takes the input from the user and renders the color"
 	},
 	{
+
+		"tag": "Intermediate",
+		"title": "Social-Media-Analytics",
+		"description" :"This project takes your input screen time and tracks which app has been used more"
+  },
+  {
 		"tag": "Basic",
 		"title": "CSS Art Gallery",
 		"description" :"CSS Art Gallery showcases the art developed by CSS"
+
 	}
 ]