<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Stories by Feva Tefera on Medium]]></title>
        <description><![CDATA[Stories by Feva Tefera on Medium]]></description>
        <link>https://medium.com/@fevatefera?source=rss-10f135dfeda9------2</link>
        <image>
            <url>https://cdn-images-1.medium.com/fit/c/150/150/0*2lkG64B9HFDlywNL</url>
            <title>Stories by Feva Tefera on Medium</title>
            <link>https://medium.com/@fevatefera?source=rss-10f135dfeda9------2</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Sun, 24 May 2026 02:25:23 GMT</lastBuildDate>
        <atom:link href="https://medium.com/@fevatefera/feed" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com" rel="hub"/>
        <item>
            <title><![CDATA[How to send sms using hahucloud and python scripts]]></title>
            <link>https://medium.com/@fevatefera/how-to-send-sms-using-hahucloud-and-python-scripts-bde60f5bc930?source=rss-10f135dfeda9------2</link>
            <guid isPermaLink="false">https://medium.com/p/bde60f5bc930</guid>
            <dc:creator><![CDATA[Feva Tefera]]></dc:creator>
            <pubDate>Tue, 30 May 2023 18:42:43 GMT</pubDate>
            <atom:updated>2023-05-30T18:42:43.908Z</atom:updated>
            <content:encoded><![CDATA[<h3>How to send SMS using hahucloud and python scripts</h3><p>For this project first need to create an account for hahu cloud on the following website “<a href="https://hahu.io/">https://hahu.io/</a>” and go to the sms io from the links.and the website is look like this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*q9hgi5bOu7fRnrr3nSfeXw.png" /></figure><p>after you create account then from your website you can get an api and a device to connect from the bars on the top and add your number and and try once manually from smsio and from quick button add your number and messages and the smis and make the priority yes and send the message. if its become succsefully sent you can work on the python code as you can see here:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/625/1*T-2ljuNAr417IbBmFhpurQ.png" /></figure><p>the above code is the full code to send sms to a user and each line is described here :</p><ol><li><strong>import requests:</strong> it is a library that’ll allow us to send HTTP requests, and we can install it by ‘pip install requests’ on our terminal</li><li><strong>apiSecret:</strong> used for storing the API_SECRET that we’ll gonna receive once we login into Hahu.io and create an account</li><li><strong>message:</strong> here we can see that we’ve created a dictionary that contains multiple parameters that help us to construct our message. ‘<strong>device</strong>’ is there to store the ID of the device that we want to send the message to, and both ‘<strong>sim</strong>’ and ‘<strong>priority</strong>’ can be set by our will. ‘<strong>phone</strong>’ parameter holds the mobile number of the receivers and ‘<strong>message</strong>’ specifies the message that we want to the number that is stored in the ‘<strong>phone</strong>’ parameter</li><li><strong>r = requests.post(url= “ ”, params= “ ”): </strong>helps us by sending a POST request to the API provider and also will send the ‘<strong>message</strong>’ parameter</li><li><strong>result = r.json(): </strong>it will store the response from the API and display it for us in JSON format. By this method we can simply send a message to user.</li></ol><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=bde60f5bc930" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to send an email using python script?]]></title>
            <link>https://medium.com/@fevatefera/how-to-send-an-email-using-python-script-ea5edcb82a62?source=rss-10f135dfeda9------2</link>
            <guid isPermaLink="false">https://medium.com/p/ea5edcb82a62</guid>
            <dc:creator><![CDATA[Feva Tefera]]></dc:creator>
            <pubDate>Mon, 29 May 2023 15:42:44 GMT</pubDate>
            <atom:updated>2023-05-29T15:42:44.857Z</atom:updated>
            <content:encoded><![CDATA[<p>So for this project i used python and email libraries in python and created a two steps verification to get my secrete key from my google account. and the steps are :</p><ol><li>First need to create a python file and add the following code you see on the below picture</li></ol><figure><img alt="" src="https://cdn-images-1.medium.com/max/364/1*Pb8c1cG2pPcn93vrkgpKgA.png" /></figure><p>the code above you see is python libraries used to send an email and you need to download email before writing the above code, By the following command on terminal in visual studio “ pip install email” download an email . so after downloading you can write and didn&#39;t/t get any error.</p><p>2. The next step will be defining the sender and the receiver and your secrete password you get from the two steps verifications. add the following code :</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/653/1*DMqQJMIWqPQB3j7NFKW_5w.png" /></figure><p>the above code explain about the sender and the receiver.</p><p>3. The next will be defining the format and add the text that you want to send with respect to an email format by the following code:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/510/1*PUcYJNtfY9OMAaEpkE-mnA.png" /></figure><p>on the above code “em[‘from’] and the other are a dictionary which is to hold the receiver and the sender and em is available created. so starting from subject to context the script send this data to the receiver by the next code</p><p>4.Finnally the code will send the data by the following code :</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/791/1*REzWT08U3S8b6Pdrbqrpzg.png" /></figure><p>“smtp.sendmail” is a protocol, which handles sending e-mail and routing e-mail between mail servers.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=ea5edcb82a62" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Web scrapping, Telegram bot Blog]]></title>
            <link>https://medium.com/@fevatefera/web-scrapping-telegram-bot-blog-d44e2477a8e0?source=rss-10f135dfeda9------2</link>
            <guid isPermaLink="false">https://medium.com/p/d44e2477a8e0</guid>
            <dc:creator><![CDATA[Feva Tefera]]></dc:creator>
            <pubDate>Fri, 26 May 2023 07:01:42 GMT</pubDate>
            <atom:updated>2023-05-26T07:01:42.376Z</atom:updated>
            <content:encoded><![CDATA[<p>For thus project we will try to cover the following concepts which are about web scrapping, creating telegram bot, sending data’s from web to the channel through bot token and other so the steps is here as follow: the telegram bot will look like this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/682/0*oaOvhEWbTo8s--Kh.png" /></figure><h3>what is web scrapping ?</h3><p>web scrapping refers to the <strong>extraction of data from a website</strong>. This information is collected and then exported into a format that is more useful for the user. Be it a spreadsheet or an API.</p><p>First, the <a href="https://www.parsehub.com/">web scraper</a> will be given one or more URLs to load before scraping. The scraper then loads the entire HTML code for the page in question. More advanced scrapers will render the entire website, including CSS and Javascript elements.</p><p>Then the scraper will either extract all the data on the page or specific data selected by the user before the project is run.</p><p>Ideally, the user will go through the process of selecting the specific data they want from the page. For example, you might want to scrape an Amazon product page for prices and models but are not necessarily interested in product reviews.</p><p>Lastly, the web scraper will output all the data that has been collected into a format that is more useful to the user.</p><pre>pip install beautifullsoup</pre><p>After knowing what is web scrap the next concept will be telegram bot so we create a channel and telegram bot (using botfather in the telegram app), after that add the bot to the channel. then telegram give us a bot token which helps us to connect to our channel and send data’s images and videos that fetches from website using scrapping .</p><pre># Set up the Telegram bot<br>bot_token = &#39;6084880964:AAFJfaQJYvXcUWotUXOCI5vQfFCzIGODY1A&#39;<br>chat_id = &#39;-1001944694630&#39;<br>bot = telegram.Bot(token=bot_token)</pre><pre># Set up the set to store the URLs<br>posted_urls = set()</pre><pre># Scrape the NPR news page<br>url = &#39;&lt;https://www.npr.org/sections/news/&gt;&#39;</pre><p>After connecting the bot token and chat id the next will be the function that works on fetching each data’s from website to telegram channel for this project we choose news website you can see on the above url code, on that website we use the class to get the data’s , news and images so on</p><p>the function is described here:</p><pre>async def scrape_npr_news():<br>    while True:<br>        try:<br>            # Scrape every 1 min<br>            &quot;&quot;&quot;<br>            In this code, timeout=60 sets the timeout to 60 seconds. <br>            This means that if the server does not respond within 60 seconds,<br>            the request will raise a Timeout exception.<br>            &quot;&quot;&quot;<br>            response = requests.get(url, timeout=20)<br>            soup = BeautifulSoup(response.content, &#39;html.parser&#39;)</pre><pre>            # Find the news article headlines, links, and images<br>            articles = soup.find_all(&#39;article&#39;, class_=&#39;item&#39;)<br>            for article in articles:<br>                Article_url = article.find(&#39;a&#39;)[&#39;href&#39;]<br>                headline = article.find(&#39;h2&#39;, class_=&#39;title&#39;).text.strip()<br>                image = article.find(&#39;img&#39;, class_=&#39;respArchListImg&#39;)<br>                detail = article.find(&#39;p&#39;,class_=&#39;teaser&#39;).text.strip()<br>                if image:<br>                    image_url = image[&#39;src&#39;]<br>                    if not image_url.startswith(&#39;http&#39;):<br>                        image_url = f&quot;{url}{image_url}&quot;<br>                    response = requests.get(image_url)<br>                    photo = BytesIO(response.content)<br>                else:<br>                    image_url = None<br>                    photo = None</pre><p>After all we check whether the data’s sends or not so we write a function which handle this issue by making the fetched data to the one array and it checks the data’s from the array before sends to the channel by the following code:</p><pre>if Article_url not in posted_urls:<br>                    # The article has not been posted yet<br>                    caption = f&quot;&#39;{headline}&#39;\\n\\n{detail}\\n&#39;Read more by the link down below&#39;\\n{Article_url}&quot;<br>                    if photo:<br>                        await bot.send_photo(chat_id=chat_id, photo=photo.getvalue(), caption=caption)<br>                    else:<br>                        await bot.send_message(chat_id=chat_id, text=caption)</pre><pre>                    # Add the URL to the set of posted URLs<br>                    posted_urls.add(Article_url)</pre><p>Finally works on after fetching the data’s it sleeps for a second when occures anetwork error so when this happens the code will run after the given or seted time on your code , by the following code:</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=d44e2477a8e0" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to use Chart Library InWorld Cup Project]]></title>
            <link>https://medium.com/@fevatefera/how-to-use-chart-library-inworld-cup-project-eed99bf82af7?source=rss-10f135dfeda9------2</link>
            <guid isPermaLink="false">https://medium.com/p/eed99bf82af7</guid>
            <dc:creator><![CDATA[Feva Tefera]]></dc:creator>
            <pubDate>Thu, 13 Apr 2023 16:51:16 GMT</pubDate>
            <atom:updated>2023-04-13T16:51:16.293Z</atom:updated>
            <content:encoded><![CDATA[<h3>How to use Chart Library InWorld- Cup Project</h3><h3>4) How I use Chart library’s in World Cup</h3><p>World cup website is simple website which shows world foot match record in charts like bar or other kinds of charts for this website i use chart library’s to display the results that is easy to understand for anyone and not time consuming in JavaScript part.</p><p>The website is look like this that contain charts :</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wdHRaTdP2uhGOWglldw9dw.png" /></figure><p>so mainly for this website i used highcharts to display the result in chart format. highcharts is very intersting chart which allows you to make your data visually represented by many kinds of chart librarys and designes .</p><p>Here are some steps to follow if you want to add chart library’s in your web.</p><ol><li>the first step will be to vist “highchart js” website and choose your chart style</li><li>after you select the chartand click on editJSFiled button</li><li>then it will show you all chart codes contains html,css and js part</li><li>select your want and use on what ever the place in your own code</li></ol><p>By this you can came up with charts in your web. after all of this the main thing is to insert or change the data that displays on your chart.</p><p>I done that by javascript function that fetch data’s from api and draw chart by the given data the code will described here:</p><pre>function statuschart(stat){<br>    Highcharts.chart(&#39;container&#39;, {<br>        title: {<br>            text: &#39;Covid19 Status&#39;,<br>            align: &#39;left&#39;<br>        },<br>        <br>        xAxis: {<br>            categories: [&#39;Countries&#39;, &#39;ByCountryAllStatus&#39;, &#39;ByCountryTotal&#39;, &#39;DayOne&#39;, &#39;DayOneAllStatus&#39;, &#39;CountryDayOneTotalAllStatus&#39;, &#39;LiveCountryStatus&#39;, &#39;WorldTotal&#39;, &#39;WorldDaily&#39;]<br>        },<br>        series: [{<br>            type: &#39;column&#39;,<br>            name: &#39;Record&#39;,<br>            colorByPoint: true,<br>            data: [parseFloat(stat.Countries), parseFloat(stat.ByCountryAllStatus), parseFloat(stat.ByCountryTotal), parseFloat(stat.DayOne), parseFloat(stat.DayOneAllStatus), parseFloat(stat.CountryDayOneTotalAllStatus), parseFloat(stat.LiveCountryStatus), parseFloat(stat.WorldTotal), parseFloat(stat.WorldDaily) ],<br>            showInLegend: false<br>        }]<br>    });<br>}</pre><p>This Java script code is to display the chart after you fetch data from api or some other external links.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=eed99bf82af7" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[What is Application Program Interface & How Movie Api works]]></title>
            <link>https://medium.com/@fevatefera/what-is-application-program-interface-71a5ef05d93f?source=rss-10f135dfeda9------2</link>
            <guid isPermaLink="false">https://medium.com/p/71a5ef05d93f</guid>
            <dc:creator><![CDATA[Feva Tefera]]></dc:creator>
            <pubDate>Thu, 13 Apr 2023 16:36:03 GMT</pubDate>
            <atom:updated>2023-04-13T17:26:07.159Z</atom:updated>
            <content:encoded><![CDATA[<h3>what is Application Programming Interface(API)</h3><p>An API, or Application Programming Interface, is a set of protocols, routines, and tools for building software applications. APIs specify the way software components should interact and are used to build software applications.</p><p>APIs are used by developers to access data and services provided by other software applications or systems. For example, an API can be used to access data from a social media platform like Facebook or Twitter, or a payment gateway like Stripe or PayPal.</p><p>APIs work by establishing a set of rules that define how different software components should interact with one another. These rules typically include guidelines for data formats, communication protocols, and authentication procedures. By following these guidelines, developers can create software applications that interact with other systems in a secure and reliable way.</p><p>APIs can be used to build a wide range of software applications, including web applications, mobile apps, desktop apps, and more. They are a key component of modern software development and are used by developers all over the world to build powerful and innovative software applications.</p><p>There are several ways to secure an API:</p><ol><li><strong>Authentication and Authorization</strong>: APIs can require authentication credentials such as API keys, OAuth tokens or JSON Web Tokens (JWT) to access specific endpoints. Authorization can be used to control which actions a user can perform based on their roles or permissions.</li><li><strong>HTTPS</strong>: APIs should use HTTPS to encrypt data in transit between the client and the server. HTTPS provides a secure channel for communication and helps protect against man-in-the-middle attacks.</li><li><strong>Input Validation</strong>: APIs should validate all user input to prevent injection attacks, such as SQL injection or cross-site scripting (XSS).</li><li><strong>Rate Limiting</strong>: APIs can enforce rate limits on requests to prevent abuse and to protect against denial-of-service (DoS) attacks.</li><li><strong>Monitoring and Logging</strong>: APIs should be monitored and logged to detect and respond to security incidents or anomalies.</li><li><strong>Firewall</strong>: APIs can be protected by a firewall to control traffic and block malicious requests.</li></ol><p>By implementing these security measures, API providers can help ensure that their APIs are secure and protected against various types of attacks.</p><p>There are several types of APIs, including:</p><ul><li><strong>Web APIs</strong>: Web APIs are used to provide access to data and services over the internet. They are typically accessed using HTTP requests and can be used to build web applications, mobile apps, and other software applications.</li><li><strong>Operating System APIs</strong>: Operating system APIs are used to access system-level functionality provided by the operating system. They are used by software applications to interact with hardware devices, manage files, and perform other system-level tasks.</li><li><strong>Library APIs</strong>: Library APIs are used to provide access to functionality provided by a software library. They are typically used by software developers to build software applications.</li></ul><p>APIs may be limited in their access to ensure that the data or services they provide are not abused or overused. This can help protect against denial-of-service attacks or other types of abuse. API providers may also limit access to certain endpoints or functionality based on factors such as user roles or permissions, subscription level, or other criteria. Additionally, API providers may use rate limiting or other techniques to control the amount of traffic they receive from a particular API client.</p><h4>How to Use Api in our movie website</h4><p>First we need to go to page of specific api websites then choose what kinds of datas to display on your pages , Api website need to sign up before you using if i use this api website to clone the data’s :”<a href="https://imdb-api.com/">https://imdb-api.com/</a>”</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eM2l2vkGVS3a1bX2YliiIw.png" /></figure><p>After you signup this api will give u api key to access the data’s then after you get your api key follow the following steps:</p><ol><li>click your choosen api and paste your apikey and add some exepression if it ask you</li><li>You will get the link as you see here:</li></ol><figure><img alt="" src="https://cdn-images-1.medium.com/max/704/1*y4eMiAp61O9GnLoM0Zl_9A.png" /></figure><p>so the next will be to Fetch this data in your web and display in your html page. this is done by the following Java Script code:</p><pre>// fetch and append movie<br>function fetchseries(){<br> return fetch(&#39;&lt;https://imdb-api.com/API/SearchSeries/k_uyxdqv0y/series&gt;&#39;)<br>    .then(response =&gt;{<br>        if(!response.ok){<br>            throw new Error(&#39;Network response was not ok&#39;);<br>        }<br>        return response.json();<br>    })<br>    .then(data =&gt; data.results)<br>   .catch(error =&gt;{<br>     console.log(&#39;error feteching data&#39; , error);<br>   });<br>}<br><br>fetchseries()<br>.then(movies =&gt;{<br>    movies.forEach(series =&gt; {<br>     console.log(series.title);<br>        seriesappend(series.title,series.image)<br>    });<br>})<br><br>function seriesappend(names ,poster){<br>    const div =document.createElement(&#39;div&#39;);<br>    const li= document.createElement(&#39;p&#39;);<br>    li.textContent = names;<br>    const img = document.createElement(&#39;img&#39;)<br>    const mov = document.getElementById(&quot;series&quot;)<br><br>    img.src =poster;<br>    div.appendChild(img);<br>    div.appendChild(li);<br>    mov.appendChild(div);<br>}</pre><p>This is the one method you fetch api data and display in your html page.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=71a5ef05d93f" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Hotel Menu Website How its Work?]]></title>
            <link>https://medium.com/@fevatefera/hotel-menu-website-how-its-work-96804ecdd374?source=rss-10f135dfeda9------2</link>
            <guid isPermaLink="false">https://medium.com/p/96804ecdd374</guid>
            <dc:creator><![CDATA[Feva Tefera]]></dc:creator>
            <pubDate>Thu, 13 Apr 2023 16:29:58 GMT</pubDate>
            <atom:updated>2023-04-13T17:04:37.936Z</atom:updated>
            <content:encoded><![CDATA[<h3>2)Hotel Menu Website (How it works)</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/630/0*SZeS0zClgUaAE0yi.png" /></figure><p>The website is looks like this,lets discribe a little ….The hotel menu webiste is simple menu website which shows food lists with there ingreidents and price and if the user want he/she can add there own new food to the menu with all requirements and also can remove it from the menu.</p><p>First thing we used html css for front page and javascript for functionality. the code is discribe here</p><ol><li>the html body contains div or section which holds the form and list it display the front page you see on the above picture</li></ol><pre>&lt;body&gt;<br>  &lt;nav class=&quot;navbar navbar-dark bg-dark justify-content-center&quot;&gt;<br>    &lt;h1 class=&quot;text-white&quot;&gt;Welcome To Hotel Menu Page&lt;/h1&gt;<br>  &lt;/nav&gt;  <br>    &lt;div class=&quot;container mt-5 mb-4&quot;&gt;<br>        &lt;div class=&quot;row&quot;&gt;<br>            &lt;div class=&quot;col-md-6&quot;&gt;<br>                &lt;div class=&quot;container&quot;&gt;<br>                    &lt;div class=&quot;row d-flex justify-content-center align-items-center h-100&quot;&gt;<br>                      &lt;div class=&quot;col-lg-12 col-xl-11&quot;&gt;<br>                        &lt;div class=&quot;card text-black&quot; style=&quot;border-radius: 25px; background-color: rgba(255, 255, 255, 0.5);&quot;&gt;<br>                          &lt;div class=&quot;card-body p-md-5&quot;&gt;<br>                            &lt;div class=&quot;row justify-content-center&quot;&gt;<br>                              &lt;div class=&quot;col-md-8 col-lg-10 col-xl-10 order-2 order-lg-1&quot;&gt;<br>                <br>                                &lt;p class=&quot;text-center h1 fw-bold mb-3 &quot;&gt;Food menu&lt;/p&gt;<br>                      <br>                                &lt;form  name=&quot;RegForm&quot; action=&quot;POST&quot;&gt;<br>                <br>                                  &lt;div class=&quot;d-flex flex-row align-items-center mb-4&quot;&gt;<br>                                    &lt;i class=&quot;fas fa-user fa-lg me-3 fa-fw&quot;&gt;&lt;/i&gt;<br>                                    &lt;div class=&quot;form-outline flex-fill mb-0&quot;&gt;<br>                                      &lt;input type=&quot;text&quot; id=&quot;food&quot; class=&quot;form-control&quot; placeholder=&quot;food name&quot; required /&gt;<br>                                      &lt;label class=&quot;form-label&quot; for=&quot;food&quot; required&gt;Food Name&lt;/label&gt;<br>                                    &lt;/div&gt;<br>                                  &lt;/div&gt;<br>                <br>                                  &lt;div class=&quot;d-flex flex-row align-items-center mb-4&quot;&gt;<br>                                    &lt;i class=&quot;fas fa-lock fa-lg me-3 fa-fw&quot;&gt;&lt;/i&gt;<br>                                    &lt;div class=&quot;form-outline flex-fill mb-0&quot;&gt;<br>                                      &lt;input type=&quot;text&quot; id=&quot;ingri&quot; class=&quot;form-control&quot; placeholder=&quot;Ingerident&quot; required /&gt;<br>                                      &lt;label class=&quot;form-label&quot; for=&quot;ingri&quot;&gt;Ingerident&lt;/label&gt;<br>                                    &lt;/div&gt;<br>                                  &lt;/div&gt;<br>                                  &lt;div class=&quot;d-flex flex-row align-items-center mb-4&quot;&gt;<br>                                    &lt;i class=&quot;fas fa-lock fa-lg me-3 fa-fw&quot;&gt;&lt;/i&gt;<br>                                    &lt;div class=&quot;form-outline flex-fill mb-0&quot;&gt;<br>                                      &lt;input type=&quot;number&quot; id=&quot;prices&quot; class=&quot;form-control&quot; placeholder=&quot;Price&quot; required /&gt;<br>                                      &lt;label class=&quot;form-label&quot; for=&quot;prices&quot;&gt;price&lt;/label&gt;<br>                                    &lt;/div&gt;<br>                                  &lt;/div&gt;<br>                <br>                                  &lt;div class=&quot;d-flex justify-content-center mx-4 mb-3 mb-lg-4&quot;&gt;<br>                                    &lt;button type=&quot;button&quot; onclick=&quot;createTable()&quot; class=&quot;btn btn-success btn-lg&quot;&gt;Register&lt;/button&gt;<br>                                  &lt;/div&gt;<br>                <br>                                &lt;/form&gt;<br>                <br>                              &lt;/div&gt;<br>                            &lt;/div&gt;<br>                          &lt;/div&gt;<br>                        &lt;/div&gt;<br>                      &lt;/div&gt;<br>                    &lt;/div&gt;<br>                  &lt;/div&gt;<br>            &lt;/div&gt;<br>    <br>            &lt;div class=&quot;col-md-6 &quot;  style=&quot;border-radius: 25px;  box-shadow: 1px 2px 20px lightblue;&quot;&gt;<br>                &lt;table class=&quot;table mt-5&quot;&gt;<br>                    &lt;thead&gt;<br>                      &lt;tr&gt;<br>                        &lt;th scope=&quot;col&quot;&gt;No&lt;/th&gt;<br>                        &lt;th scope=&quot;col&quot;&gt;Food Name&lt;/th&gt;<br>                        &lt;th scope=&quot;col&quot;&gt;Ingerident&lt;/th&gt;<br>                        &lt;th scope=&quot;col&quot;&gt;Price&lt;/th&gt;<br>                      &lt;/tr&gt;<br>                    &lt;/thead&gt;<br>                    &lt;tbody id=&quot;mytable&quot;&gt;<br>                      &lt;tr&gt;<br>                        &lt;td id=&quot;foodname&quot;&gt;&lt;/td&gt;<br>                        &lt;td id=&quot;ing&quot;&gt;&lt;/td&gt;<br>                        &lt;td id =&quot;price&quot;&gt;&lt;/td&gt;<br>                      &lt;/tr&gt;<br>                    &lt;/tbody&gt;<br>                  &lt;/table&gt;<br>                   <br>            &lt;/div&gt;<br>        &lt;/div&gt;<br>    &lt;/div&gt;<br>    &lt;script src=&quot;Script.js&quot;&gt;&lt;/script&gt;<br>&lt;/body&gt;</pre><p>2) After making the front page the next will be the functionality in javascript code …it will start by registering or adding the foods that is entered by the user and display it on the menu list by click function so on java script we have one function after clicking the register button it will add to the table menu. and the code is describe here.</p><pre>var namee = document.getElementById(&#39;food&#39;);<br>var ingg = document.getElementById(&#39;ingri&#39;);<br>var prices = document.getElementById(&#39;prices&#39;);<br>let counter = 0;<br> // here we declare avariable that get the value by id and <br>// the counter var is to hold the number and make incermnt after adding another list</pre><pre>var table = document.getElementById(&quot;mytable&quot;);<br>    var row = table.insertRow();<br>    var Rows = document.getElementById(&#39;mytable&#39;).rows.length;<br>    row.id = Rows;<br>    var cell0 = row.insertCell(0);<br>    var cell1 = row.insertCell(1);<br>    var cell2 = row.insertCell(2);<br>    var cell3 = row.insertCell(3);<br>    var cell4 = row.insertCell(4);<br>    counter++;<br>    cell0.innerHTML = counter;<br>    cell1.innerHTML = namee.value;<br>    cell2.innerHTML = ingg.value;<br>    cell3.innerHTML = prices.value + &quot; birr&quot;;<br>// here is to make table rows by id mytable and <br>// insertrow() is to add row to table.</pre><pre>var remover = document.createElement(&#39;input&#39;);<br>    remover.type = &quot;button&quot;;<br>    remover.value = &quot;remove&quot;;<br>    remover.style = &quot; background: linear-gradient(to bottom right, #EF4765, #FF9A5A); border: 0; font-size: 16px; font-weight: 500; line-height: 2.5;  outline: transparent; padding: 0 1rem; text-align: center; transition: box-shadow .2s ease-in-out;user-select: none;touch-action: manipulation; white-space: nowrap;&quot;;<br>    remover.onmouseover = &quot;this.style.box-shadow=&#39; 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5)&#39;&quot;<br>    cell4.appendChild(remover);<br>    remover.onclick = function () {<br>        const element = document.getElementById(Rows);<br>        element.remove(Rows);<br>    }</pre><p>So the above code describe the full functionality of the webstite.lets see in detail so the first code on the above is describe is to get the name of food and the ingeredient and the price by id cause we give it the id on html page.</p><p>so the getElementById() method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly.all works like this.</p><p>And on the second code the table we create on html page we insert a row by insertCell() method inserts a new cell ( &lt;td&gt; ) into a table row ( &lt;tr&gt; ) and returns a reference to the cell. after that we define the value of each row with name, ingrident and price as u see on the second code in the above.</p><p>Finally i use remove function which is about after adding the list on the table if the user want to delete the list this function will call.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=96804ecdd374" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to generete github Pages For our Website]]></title>
            <link>https://medium.com/@fevatefera/how-to-generete-github-pages-for-our-website-c8a66cb20435?source=rss-10f135dfeda9------2</link>
            <guid isPermaLink="false">https://medium.com/p/c8a66cb20435</guid>
            <dc:creator><![CDATA[Feva Tefera]]></dc:creator>
            <pubDate>Thu, 13 Apr 2023 16:26:56 GMT</pubDate>
            <atom:updated>2023-04-13T16:26:56.201Z</atom:updated>
            <content:encoded><![CDATA[<h3>1) what is GitHub pages</h3><p>GitHub Pages is <strong>a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.</strong></p><p>GitHub Pages works by hosting static website content directly from a GitHub repository. Users can create a repository for their website, push their HTML, CSS, and JavaScript files to the repository, and GitHub Pages will automatically publish the website online. This allows users to host their website for free and manage it using the same version control system they use for their code. Users can also use custom domain names for their GitHub Pages websites.</p><p>There are two types of GitHub Pages: user pages and project pages. User pages are tied to a specific user account and are typically used for personal websites or blogs. Project pages are tied to a specific project and are used to host documentation, demos, or other project-related content. Both types of pages can be published using the same process described in the previous section.</p><p>I uploaded my all project in GitHub to generete a personal https link i use user site to publish my project on browser.</p><p>steps to follows:</p><ol><li>first create a repository that holds your projects</li><li>by then add index or readme file as you choice but it must hold some one file to publish your projects</li><li>be in your created repo then go to setting</li><li>on the setting list there is page around buttom</li><li>click on pages then choose main and save it , after that referesh it well and you will get the link.</li></ol><figure><img alt="" src="https://cdn-images-1.medium.com/max/509/0*fUx5fOHXXrap2YbT.png" /></figure><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=c8a66cb20435" width="1" height="1" alt="">]]></content:encoded>
        </item>
    </channel>
</rss>