Merge pull request #258 from palaksinghania05/live_clock_new

Live clock new

Author: harshita2216

Live Clock/App.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Text, View, StyleSheet} from 'react-native';
+import Constants from 'expo-constants';
+
+import LiveClock from './components/Function';
+
+import {Card} from 'react-native-paper';
+
+export default class App extends React.Component {
+  
+  render(){
+  return (
+    <View style={styles.container}>
+      <Text style={styles.paragraph}>
+        Live Clock
+      </Text>
+      <Card style={{height:100, width:500}}>
+      <Text style={styles.timer}>
+        <LiveClock />
+      </Text>
+      </Card>
+    </View>
+  );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent:"center",
+    alignItems:"center",
+    flex: 1,
+    paddingTop: Constants.statusBarHeight,
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+    color:"red"
+  },
+  paragraph: {
+    margin: 24,
+    fontSize: 50,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color:"red"
+  },
+  timer:{
+    padding:20,
+    textAlign:"center",
+    fontSize:20,
+    fontWeight:"bold"
+  }
+});

Live Clock/README.md

@@ -0,0 +1,38 @@
+# Live Clock
+A Live Clock Project which shows current time always with appropriate abbreviations AM or PM.
+
+# Use of Project
+A beginner-friendly project to get started with web development, especially React-Native. 
+
+# Stack Used
+- JavaScript
+- React-Native
+
+# Set up required to run
+- Pre-requisite -> Install node in your system and add it to environment path variable.
+- Install expo-cli using command:
+```
+npm install -g expo-cli
+```
+- Now, clone this repo.
+```
+git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects  
+```
+- Move to project directory.
+- In your IDE terminal, run command:
+```
+npm start
+```
+- On the new window that will open in the browser, click on the preferred option like web browser, android emulator, etc.
+- Wait for sometime, the project will open and run in another tab of browser.
+
+# Screenshots
+- On running "npm start" command, a "Expo Developer Tools" window will open in the browser.
+![](./screenshots/developer_tools.png)
+
+- On clicking "Run in Web Browser", project will start initializing.
+![](./screenshots/run_in_web_browser.png)
+![](./screenshots/project_initialize.png)
+
+- A new tab will open which will show the live clock.
+![](./screenshots/live_clock.png)

Live Clock/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "liveClockProject",
+    "slug": "liveClockProject",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

Live Clock/assets/adaptive-icon.png

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

Live Clock/assets/favicon.png

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Text, View, StyleSheet, Image } from 'react-native';
+
+export default class LiveClock extends React.Component {
+  constructor(){
+    super();
+    this.state = {currentTime : new Date()}
+  }
+
+  componentDidMount(){
+    setInterval(()=> this.tick(), 1000) //tick() is called after every 1 sec or 1000ms
+  }
+
+  tick=()=>{
+    this.setState({currentTime:new Date()})
+  }
+
+  render() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.paragraph}>
+       {this.state.currentTime.toLocaleTimeString('en-US')}
+      </Text>
+    </View>
+  );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 15,
+  },
+  paragraph: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  }
+});