Category: javascript

Category Added in a WPeMatico Campaign

How to display HTML tags and copy it as plain text with Javascript

I want to display this command echo "<?php phpinfo(); ?>" using div tag and copy it by pressing the copy button. I try this,

<!DOCTYPE html>
<html>
<head>  
</head>
<body>
<div type="button" id="content">echo "<? phpinfo(); ?>"</div>
<button onclick="copyToClipboard()">Copy</button>

<script>
  function copyToClipboard() {
    var copyText = document.getElementById("content").innerHTML;
    navigator.clipboard.writeText(copyText).then(() => {
    console.log(copyText);
    });
  }
</script>
</body>
</html>

but it only display echo "" and in console I see echo "<!--? phpinfo(); ?-->"

Then, I use entity number like this echo "&#60? phpinfo(); ?&#62" or entity name like this echo "&lt;? phpinfo(); ?&gt;" it displays correctly but when I press the copy button, I get the string with entity name or number which is not that I want.

How can I solve this?

Timeout problem | Find the rank of the player with given array of scores

“An arcade game player wants to climb to the top of the leaderboard and track their ranking.” So the problem gives you two array (ranked and player). In the player array, you have the points of the player in every round and you have to check his rank based on his score on that round.

  • Highest score is ranked 1 and the same score means the same rank.

My problem -> It executes well until it gets over 200k inputs (that means in the case ranked array has +200k smt)
I’ll leave here my code and one of the inputs that I get timeout. I thought I could remember the index I found the player input bigger than the ranked[x] and for the next round score it will start from there and go up. But I couldn’t figure out how to implement it.

'use strict';

const fs = require('fs');

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', function(inputStdin) {
    inputString += inputStdin;
});

process.stdin.on('end', function() {
    inputString = inputString.split('n');

    main();
});

function readLine() {
    return inputString[currentLine++];
}

/*
 * Complete the 'climbingLeaderboard' function below.
 *
 * The function is expected to return an INTEGER_ARRAY.
 * The function accepts following parameters:
 *  1. INTEGER_ARRAY ranked
 *  2. INTEGER_ARRAY player
 */

function climbingLeaderboard(ranked, player) {
    // Write your code here
 let rank=1;
 let array=[];
for (let a=0; a<player.length; a++){
    for(let b=0; b<ranked.length; b++){
        if (player[a]<ranked[ranked.length-1]){
            ranked.push(player[a]);
            
           break;}
        else if(player[a]>ranked[b] || player[a]==ranked[b]){
          ranked.splice(b, 0, player[a]);
           break;
        }
       
       
    }
    
    for(let k=0; k<ranked.length; k++){
        if(ranked[k]>ranked[k+1]){
          
            if(ranked[k]==player[a]){
                ranked.splice(k, 1);
                 array[a]=rank;
                    rank=1;
                    break; 
        }
        rank++;
            if(ranked[k+1]==player[a]){
                ranked.splice(ranked.length-1, 1);
                 array[a]=rank;
                    rank=1;
                    break; 
            }
        
        }
        else if (ranked[k]==player[a]){
            ranked.splice(k,1);
            array[a]=rank;
            rank=1;
            break;
        }
    }
  
}
return array;
}

function main() {
    const ws = fs.createWriteStream(process.env.OUTPUT_PATH);

    const rankedCount = parseInt(readLine().trim(), 10);

    const ranked = readLine().replace(/s+$/g, '').split(' ').map(rankedTemp => parseInt(rankedTemp, 10));

    const playerCount = parseInt(readLine().trim(), 10);

    const player = readLine().replace(/s+$/g, '').split(' ').map(playerTemp => parseInt(playerTemp, 10));

    const result = climbingLeaderboard(ranked, player);

    ws.write(result.join('n') + 'n');

    ws.end();
}

test case: https://hr-testcases-us-east-1.s3.amazonaws.com/29530/input06.txt?AWSAccessKeyId=AKIAR6O7GJNX5DNFO3PV&Expires=1646331273&Signature=hgw8s3So8qewCgxf%2FX8%2B19jTbaI%3D&response-content-type=text%2Fplain

limit to three the amount of checkbox selected

I have a code that it is half working. because after selecting 3 options its not getting disabled the 2 left but is disabling the 5 of them, so there is no chance to unselected them later.

also there’re the following errors in the console when selecting the first one:

unchecked[i].setAttribute is not a function

how can I fix it, so when selecting 3 options, the ones selected don’t get disabled too?

 const handleChange = () => {
    let checked = document.querySelectorAll('input[type=checkbox]:checked')
    let unchecked = document.querySelectorAll('input[type=checkbox]')


     if(checked.length < 3)  {
         for(let i in unchecked){
         unchecked[i].removeAttribute('disabled')
      }
    } else {
        for(let i in unchecked){
        unchecked[i].setAttribute('disabled', 'disabled')
    }
        for(let i in checked){
        checked[i].removeAttribute('disabled')
    }
  }


  <form onSubmit={handleSubmit}>

    <label htmlFor="bike">Bike</label>
    <input type="checkbox" name='bike' value="bike" onChange={handleChange}/> 

    <label htmlFor="car">Car</label>
    <input type="checkbox"  name='car' value="car" onChange={handleChange}/>

    <label htmlFor="truck">Truck</label>
    <input type="checkbox"  name='truck' value="truck"onChange={handleChange}/>

    <label htmlFor="patin">Patin</label>
    <input type="checkbox"  name='patin' value="patin"onChange={handleChange}/>

    <label htmlFor="skate">Skate</label>
    <input type="checkbox" name='skate' value="skate" onChange={handleChange}/>

    <button type='submit'>continue</button>
  </form>

Style applied inside modal-body to statical divs only

Here’s my modal:

<div class="modal" id="wndLocations" tabindex="-1" role="dialog" aria-labelledby="wndLocationsCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="wndLocationsLongTitle">Locations</h5>
            </div>
            <div class="modal-body">

                <div class="divLocation">Germany</div>

            </div>
            <div class="modal-footer modalFooter">
                <button type="button" class="btn btn-primary primaryActionBackground" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

If I show the modal as written above and without tampering with it after releasing and running my web application, the divLocation style is applied to the “Germany” text, e.g. it gets a red background.

If I press a button, remove <div class="divLocation">Germany</div> and add instead <div class="divLocation">Belgium</div> before showing my modal, no red background is being added (although Chrome shows that the HTML is the same).

What am I missing?

Importing javascript function into Typescript file: function is seen as namespace

I’m trying to import a plain javascript function into a typescript file. I’m working on a React Native app.

The import is working when its just JS, but on TS I get the error: Cannot use namespace 'PrimaryButton' as a type

The javascript function resides in a node module which exports its function as such in its index.js:

export {default as PrimaryButton} from './src/components/PrimaryButton.js';

The node module is called component-library, it is a company own node module. It does not contain any types at all, only plain JS.

I have included a custom.d.ts file in the RN app where I declare component-library as a module to avoid TS errors on import:

declare module 'component-library';

export {default as PrimaryButton} from './src/components/PrimaryButton.js';

Now, when trying to import the PrimaryButton function, I get the error Cannot use namespace 'PrimaryButton' as a type.

What is the easiest way to enable to import of the PrimaryButton function without errors? I’m pretty new to Typescript and kind of lost here.

Edit the createdDate in mongoose

So I have a notice section on my site which displays what date the notice was created. When showing the createdAt date it displays like this –

Thu Mar 03 2022 15:11:22 GMT+0000 (Greenwich Mean Time)

Instead I would like it display as

03/03/2022 – 15:11

Thats DD/MM/YEAR.

Here is my Schema and my EJS that I am displaying it with. Also how it is stored in the database.

Schema

const noticeSchema = new mongoose.Schema({
noticeTitle: {
    type: String,
    required: true
},
noticeText: {
    type: String,
    required: true
},
author: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'User'
}
}, {timestamps: true 
});

EJS

<% notices.map(notice => notices.createdAt ) %>
<%= notice.createdAt %>

Database Entry

_id: new ObjectId("6220ead4f238fc30822e5e6d"),
noticeTitle: 'test3',
noticeText: '<p>test3</p>',
author: {
  _id: new ObjectId("621e06a6c29dc2273e412537"),
  firstName: 'test',
  lastName: 'test',
  jobRole: 'Other',
  email: 'test',
  username: 'DeneHCAdmin',
  __v: 0
},
createdAt: 2022-03-03T16:20:36.680Z,
updatedAt: 2022-03-03T16:20:36.680Z,
__v: 0
}

Can anybody help?

How can you send an audio wav file through rest services?

I’m working on a project where I analyze emotions through speech. For this project, I have a javascript client where I record the voice and then I send it to a Fastapi API. My AI model is already trained and it works properly in the backend, but I feel worried for the moment when I’ll deploy my API in Azure. I used to save the wav file in the “temp” file and then notify the API through a rest service to access the respective file. That will no longer be the case when I will have my server on the cloud.

Is there a format or way to send my wav files through rest services?

I also want to mention that my client will soon be changed with Vue.js and Vuetify.

Syntax Error inside npm.js, also npm keeps trying to use v10.19.0 of nodejs, even after I update it and I don’t know why

If this is a stupid question, I am sorry, but my code was literally working fine 2 days ago. Load it up today and I get all this bollocks. I am new to node and npm. So I am sorry if this is all just down to version management.

I am on linux ubuntu. I tested it in a new clean project, same error. Even tried to do something (literally just to check version number) in the terminal with npm, same error. I’ve done some searches which of some seem credible but I can’t even do anything with npm at the moment so I can’t even uninstall it or clean cache. Yes, I’ve tried with sudo.

npm does not support Node.js v10.19.0
You should probably upgrade to a newer version of node as we
can't make any promises that npm will work with this version.
You can find the latest version at https://nodejs.org/
/usr/local/lib/node_modules/npm/lib/npm.js:32
  #unloaded = false
  ^

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at module.exports (/usr/local/lib/node_modules/npm/lib/cli.js:22:15)
    at Object.<anonymous> (/usr/local/lib/node_modules/npm/bin/npm-cli.js:2:25)
    at Module._compile (internal/modules/cjs/loader.js:778:30)

Mongodb find by array of ids in order

I am making a dating app where an algorithm returns an array of matching user’s uuid by sorting it.
So I want to find all the users by that array of uuid in order.

I tried doing this

//init algorithm
const algo = new Match(currentUser, users);
//calculate score
algo.calcScore();
//sort it
algo.sort();
//get array of uids of matching users
const matches = algo.matching_users;

//find users by that array of uid
const matching_users = await User
  .find({
    uid: {
      $in: matches
    }
  })
  .skip(total_items - items)
  .limit(items)
  .lean()
  .exec()

This returns the users but not in order.
For example let array of uids be: ["c", "d", "a", "b"]
the above query returns user objects in: [{...uid: "a"},{...uid: "b"},{...uid: "c"},{...uid: "d"}, ]

Expected output: [{...uid: "c"},{...uid: "d"},{...uid: "a"},{...uid: "b"}, ]

Getting “TypeError: user.getIdToken is not a function” when updating password in firebase

When I run the function updatePassword I get the error “TypeError: user.getIdToken is not a function”, which comes from a file in the firebase sdk.

async changePassword(state, payload) {
      const user = auth.currentUser
      let cred = EmailAuthProvider.credential(
        payload.email,
        payload.oldPassword
      )

      reauthenticateWithCredential(user, cred)
        .then(() => {
          // User re-authenticated.
          console.log(payload.newPassword)
          updatePassword(payload.email, payload.newPassword)
            .then(() => {
              // Update successful.
              console.log('Succeed')
            })
            .catch((error) => {
              console.log('Failed', error)
              // An error ocurred
              // ...
            })
        })
        .catch((error) => {
          // An error ocurred
          // ...
          console.log(error)
        })
    },

Javascript – Online Coding assessment to mask credit cards numbers with #

I got the below coding assessment question in Javascript. I tried my best to solve but there are few edge cases I missed. I need help to identify those missing cases

Usually when you buy something, you’re asked whether your credit card number, phone number or answer to your most secret question is still correct.
However, since someone could look over your shoulder, you don’t want that shown on your screen. Instead, we mask it.

Your task is to write a function maskify, which will:

Mask all digits (0-9) with #, unless they are first or last four characters.
Never mask credit cards with less than 6 characters.
Never mask non-digit characters.
Examples Input Output Comments "4556364607935616" "4###########5616" "4556-3646-0793-5616" "4###-####-####-5616" "64607935616" "6######5616" ABCD-EFGH-IJKLM-NOPQ ABCD-EFGH-IJKLM-NOPQ A1234567BCDEFG89HI A#######BCDEFG89HI "12345" "12345" No #s if less than 6 characters "" "" Make sure to handle empty strings "Skippy" "Skippy"
Documentation

maskify(cc)

Parameters:
cc: String
A string of any characters.

Guaranteed Constraints:
The input string will never be null or undefined.
Returns: String
The input string with all but the first and last four characters replaced with ‘#’.

This is what I tried so far

function maskify (cc) {
  if (cc.length < 6) {
      let reversed = reverse(cc);
      let newString = '';
      for (let i = 0; i < reversed.length; i++) {
        if (i < 4) {
          newString += reversed[i];
        } else {
          newString += '#';
        }
      }
      return reverse(newString);
  } else {
  return cc.slice(0, -4).replace(/./g, '#') + cc.slice(-4);
  }
}
 
function reverse(str) {
  return str.split("").reverse().join("");
}

Output

should mask the digits of standard credit cards
expected '############0694' to equal '5###########0694'
Completed in 2ms
should not mask the digits of short credit cards
expected '#4321' to equal '54321'

Reading image from sharepoint with access_token, now want to display as image on site but saving it gives the name “download” and no extension?

(This code is in JS/React)
So I’m getting an image from my Sharepoint using the following:

export const readBlob = async (absolutePath, relativePath, access_token) => {
  const res = await axios.get(
    `${absolutePath}/_api/web/GetFileByServerRelativePath(decodedurl='${relativePath}')/$value`,
    {
      headers: {
        Accept: "image/*",
        Authorization: `Bearer ${access_token}`,
      },
      responseType: "arraybuffer",
    }
  );
  const blob = new Blob([res.data]);
  return blob;
};

Here’s how I fetch my picture:

  const fetchPicture = async (file) => {
    if (file && file.Name) {
      const blob = await readBlob(
        absolutePath,
        file.ServerRelativeUrl,
        access_token
      );
      blob_to_dataURI(blob, function (dataURL) {
        setImage(dataURL);
        dispatch(rerender());
      });
    }
  };

Then I’m setting the image:

  {image && (
    <img
      className="c-asset__image"
      src={image}
      onClick={() => setShowModal(true)}
    />
  )}

As you can see, I’m setting the DATA_URL of the blob of the image I got from Sharepoint (with an access_token) to be the source of the Image-HTML-tag. This works, the image displays nicely.

However, how can I set the Right-Click => Save Image As… text? Right now it says “download” with no extension. Does anyone know?

EDIT: I don’t care what hacky way is needed or what package need to be installed, I just need it to work 🙂

Button background Color disappears if clicked outside of the button/on body

so I have created a tabpane using html,css,and javascript so the issue I am facing is that when I click outside the button the background color of the the active tab’s button disappears .I am able to change the color of the buttons while switching between the tabs by using onfocus() and onblur() functions ,but whenever I click outside the button/on body active tab’s button’s background color disappears.

Is there a way to solve this issue?

// console.log('hii');

function fun1(a){
    // console.log(a);
 var x = document.getElementById(a)  
 var data = document.getElementsByClassName('inner_section')
 console.log(data);
 for(var i=0;i < data.length;i++){
    data[i].style.display="none"
}
    x.className +=" slide-in-bottom"
    x.style.display = "block";

}

function fun2(b){
  b.style.backgroundColor="#ff6136"
  var d = document.getElementById('button_1')
  d.classList.remove('active_button')
}

function fun3(c){
    c.style.backgroundColor="white"
}
body{
    background-color: whitesmoke;
}
.section h3,h1{
    text-align: center;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
}
.section h3{
    color: gray;    
}
.main_button_class{
    width: 100%;
    display: flex;
    justify-content: center
}
.active_button{
    background-color: #ff6136;
}
.main_button_class button{
    margin: 1em;
    padding: 1.5em;
    padding-left:2em;
    padding-right: 2em;
    border: none;
    color: rgb(20, 20, 20);
    font-family: 'Playfair Display', serif;
    cursor: pointer;
    box-shadow: 0px 8px 15px rgba(61, 61, 61,0.3);
}
.icons{
    width: 20px;
    height: auto;
}
.divs{
    margin: 1.5em;    
    width: 600px;
    height: 100px;
    border:none;
    box-shadow: -7px 8px 7px lightgrey;
    background-color: white;
    display: flex;
    justify-content: space-between;
}
.divs:hover{
    background-color: #ff6136;
}
.inner_divs_1{
    display: flex;
}
.inner_divs_1 h4{
    margin-right: 1em;
    font-size: 18px;
    font-family: 'Playfair Display', serif;
}
.inner_divs_2 {
    font-size: 2em;
    padding: 11px;
    font-family: 'Mulish', sans-serif;
}
.text-muted{
    color: gray;
    font-size: 18px;
    font-family: 'Mulish', sans-serif;

}
.abc{
    display: flex;
    width: 100%;
    height: fit-content;
    justify-content: space-around;
}
.pqr{
    display: flex;
    width: 100%;
    height: fit-content;
    justify-content: space-around;
}
.xyz{
    display: flex;
    width: 100%;
    height: fit-content;
    justify-content: space-around;
}
#dish_2{
    display: none;
}
#dish_3{
    display: none;
}
.inner_images{
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin: 1em;
}

.slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
 @-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 7 part 2</title>
    <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=Playfair+Display&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index2.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=Mulish:wght@200&display=swap" rel="stylesheet">
    <!-- <script src="https://kit.fontawesome.com/d98e4752db.js" crossorigin="anonymous"></script> -->

</head>
<body>
    <div class="section">
        <h3>our menu</h3>
        <h1>Restaurant & Bar</h1>
        <div class="main_button_class">
        <button id="button_1" class="active_button" onclick="fun1('dish_1')" onfocus="fun2(this)" onblur="fun3(this)" ><img src="tray.png"class="icons"/> Main</button>
        <button id="button_2" onclick="fun1('dish_2')"onfocus="fun2(this)"onblur="fun3(this)"><img src="beer.png"class="icons"/> Dessert</button>
        <button id="button_3" onclick="fun1('dish_3')"onfocus="fun2(this)"onblur="fun3(this)"><img src="cheers.png"class="icons"/> Drinks</button>
    </div>
    <!-- Part 1 -->
    <div class="inner_section"id="dish_1">
        <div class="abc">
        <div class="inner_section1" >
            <div class="divs">
                <div class="inner_divs_1">
            <img src="https://preview.colorlib.com/theme/cozy/images/xdish-3.jpg.pagespeed.ic._eupGZGDhZ.webp" alt="" srcset="" class="inner_images">
            <h4>Grilled Beef with potatoes<br>
               <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
            </h4>

        </div>
        <div class="inner_divs_2">
            $29
        </div>
        </div>
            <div class="divs" >
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdish-4.jpg.pagespeed.ic.QNS0cGseKC.webp" alt="" srcset="" class="inner_images">
                    <h4>Fruit Vanilla Ice Cream<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
        
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">  
                <div class="inner_divs_1">
                <img src="https://preview.colorlib.com/theme/cozy/images/xdish-5.jpg.pagespeed.ic.h2NHjzs2rt.webp " alt="" srcset="" class="inner_images">
                <h4>Asian Hoisin Pork<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
    
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
        
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdish-6.jpg.pagespeed.ic.LHa9ujD1jc.webp " alt="" srcset="" class="inner_images">
                    <h4>Spicy Fried Rice & Bacon<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdish-7.jpg.pagespeed.ic.QKJ9esJPYg.webp " alt="" srcset="" class="inner_images">
                    <h4>Mango Chili Chutney<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
        </div>

        <div class="inner_section2">  
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdish-8.jpg.pagespeed.ic.X1UarM12S1.webp " alt="" srcset="" class="inner_images">
                    <h4>Savory Watercress Chinese Pancakes<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>


            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdish-9.jpg.pagespeed.ic.RMbgqdIacd.webp " alt="" srcset="" class="inner_images">
                    <h4>Soup With Vegetables And Meat<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <!-- -->
            <div class="divs">
                 <div class="inner_divs_1">
                <img src=" https://preview.colorlib.com/theme/cozy/images/xdish-10.jpg.pagespeed.ic.AjEzQKSqtq.webp" alt="" srcset="" class="inner_images">
                <h4>Udon Noodles With Vegetables<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>

            <div class="divs">
                <div class="inner_divs_1">
                    <img src=" https://preview.colorlib.com/theme/cozy/images/xdish-11.jpg.pagespeed.ic.SSID_aLKfC.webp" alt="" srcset="" class="inner_images">
                    <h4>Baked Lobster With A Garnish<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdish-8.jpg.pagespeed.ic.X1UarM12S1.webp" alt="" srcset="" class="inner_images">
                    <h4>Octopus with Vegetables<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- Part 2 -->
    <div class="inner_section"id="dish_2">
        <div class="pqr">
        <div class="inner_section1" >
  
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-1.jpg.pagespeed.ic.SW4Gb-2Sdd.webp " alt="" srcset="" class="inner_images">
                    <h4>Grilled Beef with potatoes<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs" >
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-2.jpg.pagespeed.ic.PXl-DGXsd5.webp " alt="" srcset="" class="inner_images">
                    <h4>Grilled Beef with potatoes<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-3.jpg.pagespeed.ic.QA267i3edb.webp " alt="" srcset="" class="inner_images">
                    <h4>Grilled Beef with potatoes<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-4.jpg.pagespeed.ic.ExoXl1Yy0j.webp " alt="" srcset="" class="inner_images">
                    <h4>Grilled Beef with potatoes<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-5.jpg.pagespeed.ic.yC-EI1C2Sl.webp " alt="" srcset="" class="inner_images">
                    <h4>Grilled Beef with potatoes<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
        </div>
        <div class="inner_section2">  
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-6.jpg.pagespeed.ic.xuS6fI649R.webp " alt="" srcset="" class="inner_images">
                    <h4>Tiramisu<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-7.jpg.pagespeed.ic.uGV1uE0TVM.webp " alt="" srcset="" class="inner_images">
                    <h4>Chocolate Cream<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-8.jpg.pagespeed.ic.nzJWrF6g2R.webp " alt="" srcset="" class="inner_images">
                    <h4>Pizza Pie<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-9.jpg.pagespeed.ic.b75RlkqLs7.webp" alt="" srcset="" class="inner_images">
                    <h4>Sicilian Ricotta<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>
            <div class="divs">
                <div class="inner_divs_1">
                    <img src="https://preview.colorlib.com/theme/cozy/images/xdessert-10.jpg.pagespeed.ic.q2XtdIPwdq.webp " alt="" srcset="" class="inner_images">
                    <h4>Mango FLoat<br>
                       <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                    </h4>
                </div>
                <div class="inner_divs_2">
                    $29
                </div>
            </div>

    </div>
    </div>
 </div>
<!-- Part 3 -->
<div class="inner_section"id="dish_3">
    <div class="xyz">

    <div class="inner_section1" >
        <div class="divs">
            <div class="inner_divs_1">
                <img src="https://preview.colorlib.com/theme/cozy/images/xdrink-1.jpg.pagespeed.ic.RCrXYE6lI1.webp " alt="" srcset="" class="inner_images">
                <h4>Lemon Juice<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
     
        <div class="divs" >
            <div class="inner_divs_1">
                <img src=" https://preview.colorlib.com/theme/cozy/images/xdrink-2.jpg.pagespeed.ic.SpvM1G0DSa.webp " alt="" srcset="" class="inner_images">
                <h4>Guava Juice<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
        <div class="divs">
            <div class="inner_divs_1">
                <img src="  https://preview.colorlib.com/theme/cozy/images/xdrink-3.jpg.pagespeed.ic.gVXfnHFXF_.webp " alt="" srcset="" class="inner_images">
                <h4>Guava Juice<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
        <!--  -->
        <div class="divs">
            <div class="inner_divs_1">
                <img src="https://preview.colorlib.com/theme/cozy/images/xdrink-4.jpg.pagespeed.ic.3viOU5YJzH.webp" alt="" srcset="" class="inner_images">
                <h4>Cola<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
        <!-- -->
        <div class="divs">
            <div class="inner_divs_1">
                <img src="https://preview.colorlib.com/theme/cozy/images/xdrink-5.jpg.pagespeed.ic.ZiCZ5rrjr4.webp " alt="" srcset="" class="inner_images">
                <h4>Wine<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
    </div>
    <div class="inner_section2">  
        <div class="divs">
            <div class="inner_divs_1">
                <img src="https://preview.colorlib.com/theme/cozy/images/xdrink-6.jpg.pagespeed.ic.u6RPJcbH6h.webp " alt="" srcset="" class="inner_images">
                <h4>Beer<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
        <!--  -->
        <div class="divs">
            <div class="inner_divs_1">
                <img src="https://preview.colorlib.com/theme/cozy/images/xdrink-7.jpg.pagespeed.ic.FxQPy3duGU.webp" alt="" srcset="" class="inner_images">
                <h4>Mango Juice<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
        <!--  -->
        <div class="divs">
            <div class="inner_divs_1">
                <img src="https://preview.colorlib.com/theme/cozy/images/xdrink-8.jpg.pagespeed.ic.E5AmxrGlDY.webp" alt="" srcset="" class="inner_images">
                <h4>Apple Juice<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
        <div class="divs">
            <div class="inner_divs_1">
                <img src="https://preview.colorlib.com/theme/cozy/images/xdrink-10.jpg.pagespeed.ic.0RAnNKt8zC.webp" alt="" srcset="" class="inner_images">
                <h4>Orange Juice<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>
        <div class="divs">
            <div class="inner_divs_1">
                <img src="https://preview.colorlib.com/theme/cozy/images/xdrink-9.jpg.pagespeed.ic.qnCVD_wbaQ.webp" alt="" srcset="" class="inner_images">
                <h4>Strawberry Juice<br>
                   <span class="text-muted">Meat, Potatoes, Rice, Tomatoe</span> 
                </h4>
            </div>
            <div class="inner_divs_2">
                $29
            </div>
        </div>

</div>
</div>

</div>

</div>
    <script type="text/javascript" src="index2.js"></script>
   
</body>
</html>